鸿蒙API14开发【progress】JS服务卡片UI组件

最新推荐文章于 2025-08-16 10:17:25 发布

原创最新推荐文章于 2025-08-16 10:17:25 发布 · 723 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #javascript #ui #华为 #鸿蒙 #鸿蒙系统

鸿蒙系列专栏收录该内容

935 篇文章

订阅专栏

进度条，用于显示内容加载或操作的处理进度。

说明：

从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

属性

除支持[通用属性]外，还支持如下属性：

名称	类型	默认值	必填	描述
type	string	horizontal	否	设置进度条的类型，该属性不支持动态修改，可选值为： - horizontal：线性进度条。 - circular：loading样式进度条。 - ring：圆环形进度条。 - scale-ring：带刻度圆环形进度条。 - arc：弧形进度条。 - eclipse：圆形进度条，展现类似月圆月缺的进度展示效果。

不同类型的进度条还支持不同的属性：

类型为horizontal、ring、scale-ring时，支持如下属性：

名称类型默认值必填描述
percent number 0 否当前进度。取值范围为0-100。
secondarypercent(Rich) number 0 否次级进度。取值范围为0-100。
类型为ring、scale-ring时，支持如下属性：

名称类型默认值必填描述
clockwise boolean true 否圆环形进度条是否采用顺时针。
类型为arc、eclipse时，支持如下属性：

名称类型默认值必填描述
percent number 0 否当前进度。取值范围为0-100。

名称	类型	默认值	必填	描述
percent	number	0	否	当前进度。取值范围为0-100。
secondarypercent(Rich)	number	0	否	次级进度。取值范围为0-100。

名称	类型	默认值	必填	描述
clockwise	boolean	true	否	圆环形进度条是否采用顺时针。

名称	类型	默认值	必填	描述
percent	number	0	否	当前进度。取值范围为0-100。

样式

除支持[通用样式]外，还支持如下样式：

type=horizontal

名称	默认值	必填	描述
color	#ff007dff	否	设置进度条的颜色。
stroke-width	4px	否	设置进度条的宽度。
background-color	-	否	设置进度条的背景色。
secondary-color	-	否	设置次级进度条的颜色。

type=circular

名称	类型	默认值	必填	描述
color		-	否	loading进度条上的圆点颜色。

type=ring, scale-ring

名称	类型	默认值	必填	描述
color			-	否
background-color		-	否	环形进度条的背景色。
secondary-color		-	否	环形次级进度条的颜色。
stroke-width		10px	否	环形进度条的宽度。
scale-width		-	否	带刻度的环形进度条的刻度粗细，类型为scale-ring生效。
scale-number	number	120	否	带刻度的环形进度条的刻度数量，类型为scale-ring生效。

type=arc

名称	默认值	必填	描述
color	-	否	弧形进度条的颜色。
background-color	-	否	弧形进度条的背景色。
stroke-width	-	否	弧形进度条的宽度。进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。
start-angle	240	否	弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。
total-angle	240	否	弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。
center-x	-	否	弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。
center-y	-	否	弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。
radius	-	否	弧形进度条半径，该样式需要和center-x和center-y一起。

事件

支持[通用事件]

示例

<!--xxx.hml -->
<div class="container">
  <progress class="min-progress" type="scale-ring"  percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="arc" percent= "10"></progress>
  <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>
html

/* xxx.css */
.container {
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}
.min-progress {
  width: 300px;
  height: 300px;
}
css

4*4卡片

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传