Read the original article：Progress component to implement a clock-style progress bar
Requirement Description
How can I create a 360-degree circular dial and add a white dashed line that follows the rotation around the circumference (similar to a clock hand)?
Background Knowledge
- Progress Bar (Progress): Progress is a progress bar display component that typically shows the current progress of a target operation. For specific usage, please refer to Progress.
Implementation Steps
The circular progress bar refers to the progress bar in the official documentation. The dashed lines are set using the Divider() component, and the rotation angle follows the progress of the progress bar.
Code Snippet / Configuration
@Entry
@Component
struct Index {
@State rotateAngle: number = 0
uiContext: UIContext | undefined = undefined;
aboutToAppear() {
this.uiContext = this.getUIContext();
if (!this.uiContext) {
console.warn('no uiContext');
return;
}
}
build() {
Column() {
Column() {
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ scaleCount: 20, scaleWidth: 5 })
Divider()
.height(40)
.width(0)
.borderWidth(2)
.margin({ top: -90 })
// Set the rotation center using centerX and centerY
.rotate({
centerX: '100%',
centerY: '100%',
angle: this.rotateAngle
})
.onAppear(() => {
this.uiContext?.animateTo({
duration: 3000,
curve: Curve.Linear,
iterations: -1, // Setting -1 indicates that the animation loops indefinitely
}, () => {
this.rotateAngle = 360 * 20 / 150
})
})
}.width('100%').height('100%')
}
}
}
Limitations or Considerations
- This example supports API Version 19 Release and later versions.
- This example supports HarmonyOS 5.1.1 Release SDK and later versions.
- This example requires DevEco Studio 5.1.1 Release or later for building and running.
