如何在CUBA中将progressBar修改为圆形样式

你遇到的只读文件为CUBA框架内置核心类，本身就禁止直接修改，无需尝试编辑这类文件，按以下方案操作即可实现圆形progressBar效果：

配置方案 #

• 方案1：界面XML静态配置（无需改Java代码）
  直接编辑你业务界面对应的XML描述文件（项目内自有文件，可正常编辑），给progressBar组件添加indeterminate="true"属性即可，配置示例：

  <progressBar id="loadProgress"
               indeterminate="true"
               width="40px"
               height="40px"/>
  

• 方案2：界面控制器动态设置
  如果需要运行时切换进度条状态，在对应业务界面的控制器Java文件（你自行创建的*Screen.java等业务类，非框架内置文件）中注入组件后调用设置方法即可，代码示例：
  1. 注入组件

  @Autowired
  private ProgressBar loadProgress;
  

  2. 动态设置属性

  loadProgress.setIndeterminate(true);
  

• 方案3：自定义圆形进度条样式
  如果默认圆形样式不符合设计需求，编辑项目主题扩展样式文件modules/web/themes/halo/halo-ext.scss（路径根据你使用的主题名调整，为项目自有可编辑文件），添加自定义CSS规则：

  .v-progressbar-indeterminate {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-color: #1890ff;
  }
  

注意事项 #

• 所有修改都在你项目自有业务文件、主题配置文件中完成，不需要修改框架内置的只读文件
• indeterminate属性设为true后，progressBar默认就会渲染为圆形旋转的不确定进度样式，不需要修改组件底层源码

内容的提问来源于stack exchange，提问作者Armature