0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
Nnessiezyupdate docs
1db19c8e创建于 4月3日历史提交

Progress

The Progress component represents a progress indicator that displays the progress of content loading or an operation.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

Progress(options: ProgressOptions)

Creates a progress indicator.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
options ProgressOptions Yes Options of the progress indicator, which vary by progress indicator type.

ProgressOptions

Defines progress bar options.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
value number No No Current progress. Values less than 0 are adjusted to 0, and values greater than the total value are capped at the total value.
Default value: 0
Value range: [0, total]
Widget capability: This API can be used in ArkTS widgets since API version 9.
total number No Yes Total progress. If this parameter is set to a value less than or equal to 0, the value 100 is used.
Default value: 100
Value range: [0, 2147483647]
Widget capability: This API can be used in ArkTS widgets since API version 9.
type8+ ProgressType No Yes Style of the progress indicator.
Default value: ProgressType.Linear
Widget capability: This API can be used in ArkTS widgets since API version 9.
Note: Different types must correspond to different style attribute settings. For details about the mapping, see ProgressStyleMap.
style(deprecated) ProgressStyle No Yes Style of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use type instead.
Default value: ProgressStyle.Linear

ProgressType8+

Enumerates progress indicator types.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
Linear 0 Linear type. Since API version 9, the progress indicator adapts to vertical display when its height is greater than its width.
Ring 1 Indeterminate ring type. The ring fills up as the progress increases.
Eclipse 2 Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.
ScaleRing 3 Ring style with scales, which is similar to the clock scale style. Since API version 9, the progress indicator automatically switches to a non‑scaled ring style when the outer scales overlap.
Capsule 4 Capsule type. At both ends, the progress indicator works in the same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in the same manner as the linear type. When the height is greater than the width, the progress indicator adapts to vertical display.

ProgressStyle

Enumerates progress indicator styles.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
Linear 0 Linear style.
Ring8+ 1 The ring is gradually displayed until completely filled.
Eclipse 2 Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full.
ScaleRing8+ 3 Ring style with scales, which is similar to the clock scale style.
Capsule8+ 4 Capsule style. At both ends, the progress indicator works in the same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in the same manner as the linear style. When the height is greater than the width, the progress indicator adapts to vertical display.

ProgressStyleMap10+

Defines the mapping between progress indicators and styles.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type
ProgressType.Linear LinearStyleOptions10+  |  ProgressStyleOptions 
ProgressType.Ring RingStyleOptions10+  |  ProgressStyleOptions 
ProgressType.Eclipse EclipseStyleOptions10+  |  ProgressStyleOptions 
ProgressType.ScaleRing ScaleRingStyleOptions10+  |  ProgressStyleOptions 
ProgressType.Capsule CapsuleStyleOptions10+  |  ProgressStyleOptions 

Attributes

In addition to the universal attributes, the following attributes are supported.

NOTE

This component overrides the universal attribute backgroundColor. When applied directly to the Progress component, it sets the background color of the progress indicator itself. To set the background color for the entire Progress component area, apply backgroundColor to the outer container that wraps the Progress component.

value

value(value: number)

Current progress. Values less than 0 are adjusted to 0, and values greater than the total value are capped at the total value. Invalid values do not take effect.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number Yes Current progress.
Default value: 0

color

color(value: ResourceColor | LinearGradient)

Sets the foreground color of the progress indicator.

Since API version 10, LinearGradient can be used to set a gradient color for the ring style. Setting opacity is not recommended for the ring type. If opacity is required, use DataPanel.

Since API version 23, LinearGradient can be used to set gradient colors for the linear and capsule styles. In API version 22 and earlier versions, setting gradient colors via LinearGradient for the Linear and Capsule styles will not render the custom colors; the system's default theme colors will be used instead.

Widget capability: This API can be used in ArkTS widgets since API version 9, except that LinearGradient is not supported.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value ResourceColor | LinearGradient Yes Foreground color of the progress indicator.
Default value:
- Capsule:
   API version 9 or earlier: '#ff007dff'
   API version 10: '#33006cde'
   API version 11 or later: '#33007dff'
- Ring:
   API version 9 or earlier: '#ff007dff'
   API version 10 or later: start: '#ff86c1ff', end: '#ff254ff7'
- Other styles: '#ff007dff'

style8+

style(value: ProgressStyleOptions | CapsuleStyleOptions | RingStyleOptions | LinearStyleOptions | ScaleRingStyleOptions | EclipseStyleOptions)

Sets the component style.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value ProgressStyleOptions8+ | CapsuleStyleOptions10+ | 
RingStyleOptions10+ | LinearStyleOptions10+ | 
ScaleRingStyleOptions10+ | EclipseStyleOptions10+		 Yes Component style.
- CapsuleStyleOptions: capsule style.
- RingStyleOptions: ring style.
- LinearStyleOptions: linear style.
- ScaleRingStyleOptions: determinate ring style.
- EclipseStyleOptions: eclipse style.
- ProgressStyleOptions: strokeWidth, scaleCount, and scaleWidth of a progress indicator. This parameter is valid only for the progress indicator that supports these style settings.

contentModifier12+

contentModifier(modifier:ContentModifier<ProgressConfiguration>)

Creates a content modifier.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
modifier ContentModifier<ProgressConfiguration> Yes Content modifier to apply to the current component.
modifier: content modifier. You need a custom class to implement the ContentModifier API.

privacySensitive12+

privacySensitive(isPrivacySensitiveMode: Optional<boolean>)

Sets whether to enable privacy-sensitive mode.

NOTE

This API can be called in attributeModifier since API version 20.

Widget capability: This API can be used in ArkTS widgets since API version 12.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
isPrivacySensitiveMode Optional<boolean> Yes Whether to enable privacy-sensitive mode, in which the progress indicator is cleared and text content is masked. true: The privacy-sensitive mode is enabled. false: The privacy-sensitive mode is disabled.
Default value: false
NOTE
Setting this parameter to null indicates that no specific privacy sensitivity is applied.
For widgets, this property must be used with FormComponent and the obscured attribute to display privacy masking effects.

ProgressConfiguration12+

Provides progress indicator configuration. Inherits from CommonConfiguration.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
value number No No Current progress. Values less than 0 are adjusted to 0. Values greater than the value of total are capped at the value of total.
Default value: 0
Value range: [0, total]
total number No No Total progress.
Value range: [0, 2147483647]
NOTE
If the value of total is a negative number, it is treated as 100.

CommonProgressStyleOptions10+

Provides common style configuration options for the progress indicator.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
enableSmoothEffect boolean No Yes Whether to enable the smooth effect. When this feature is enabled, the progress value transitions from the current value to the target value with a progress change animation displayed on the page. When this feature is disabled, the progress value jumps directly to the target value without any animation.
true: The smooth effect is enabled.
false: The smooth effect is disabled.
Default value: true

ScanEffectOptions10+

Defines the scan effect options.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
enableScanEffect boolean No Yes Whether to enable the scan effect. Only the progress indicator of the linear, ring, and capsule type is supported.
true: The scan effect is enabled.
false: The scan effect is disabled.
Default value: false

ProgressStyleOptions8+

Defines the progress bar style options.

Inherits from CommonProgressStyleOptions.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
strokeWidth Length No Yes Stroke width of the progress indicator. Percentage values are not supported.
Default value: 4.0vp
If the value is out of the range, the default value is used.
scaleCount number No Yes Number of divisions on the ring-style process indicator.
Default value: 120vp
Value range: [2, min(width, height)/scaleWidth/2/π]. If the value is outside this range, the progress indicator is displayed in the indeterminate ring style. By default, the minimum width and height are 77 vp.
scaleWidth Length No Yes Scale width of the ring-style progress indicator. Percentage values are not supported. If the scale width is greater than the stroke width of the progress indicator, the default scale width is used.
Default value: 2.0vp

CapsuleStyleOptions10+

Capsule style options.

Inherits from ScanEffectOptions and CommonProgressStyleOptions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
borderColor ResourceColor No Yes Border color.
Default value:
API version 10: '#33006cde'
API version 11 or later: '#33007dff'
borderWidth Length No Yes Border width. Percentage values are not supported.
Default value: 1vp
content ResourceStr No Yes Text content, which can be customized.
The Resource type is supported since API version 20.
font Font No Yes Text style.
Default value:
Font size (percentage values are not supported): 12fp
Other text parameters are subject to the theme values of the Text component.
fontColor ResourceColor No Yes Font color.
Default value: '#ff182431'
showDefaultPercentage boolean No Yes Whether to display the percentage text. After this feature is enabled, the progress percentage is displayed on the progress indicator. This property does not take effect when content is set.
true: The percentage text is displayed. false: The percentage text is not displayed.
Default value: false
borderRadius18+ LengthMetrics No Yes Border radius. Percentage values are not supported.
Value range: [0, height/2]
Default value: height/2
If an invalid value is set, the default value is used.

RingStyleOptions10+

Options of the ring style without scales.

Inherits from ScanEffectOptions and CommonProgressStyleOptions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
strokeWidth Length No Yes Stroke width of the progress indicator. Percentage values are not supported. When the width is greater than or equal to the radius, it defaults to half the radius.
Default value: 4.0vp
shadow boolean No Yes Whether to enable the shadow effect.
true: The shadow effect is enabled. false: The shadow effect is disabled.
Default value: false
status ProgressStatus10+ No Yes Progress state. When this parameter is set to ProgressStatus.LOADING, the update check animation is enabled, and the progress value setting does not take effect. When the value changes from ProgressStatus.LOADING to ProgressStatus.PROGRESSING, the update check animation runs to completion and then stops.
Default value: ProgressStatus.PROGRESSING

LinearStyleOptions10+

Linear style options.

Inherits from ScanEffectOptions and CommonProgressStyleOptions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
strokeWidth Length No Yes Stroke width of the progress indicator. Percentage values are not supported.
Default value: 4.0vp
strokeRadius PX | VP | LPX | Resource No Yes Border radius of the linear progress indicator.
Value range: [0, strokeWidth/2] Default value: strokeWidth/2

ScaleRingStyleOptions10+

Options of the ring style with scales.

Inherits from CommonProgressStyleOptions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Read-Only Optional Description
strokeWidth Length No Yes Stroke width of the progress indicator. Percentage values are not supported.
Default value: 4.0vp
scaleCount number No Yes Number of divisions on the ring-style process indicator.
Default value: 120vp
Value range: [2, min(width, height)/scaleWidth/2/π]. If the value is outside this range, the progress indicator is displayed in the indeterminate ring style. By default, the minimum width and height are 77 vp.
scaleWidth Length No Yes Scale width of the ring-style progress indicator. Percentage values are not supported. If the scale width is greater than the stroke width of the progress indicator, the default scale width is used.
Default value: 2.0vp

EclipseStyleOptions10+

Options of the eclipse style. The eclipse style visualizes the progress in a way similar to the moon waxing from new to full.

Inherits from CommonProgressStyleOptions.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

ProgressStatus10+

Current state of the progress indicator.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
LOADING 'LOADING' Loading.
PROGRESSING 'PROGRESSING' Progressing.

Events

The universal events are supported.

Example

Example 1: Setting Progress Indicator Types

This example demonstrates how to set the progress indicator type using the input parameter type of ProgressOptions.

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 10, type: ProgressType.Linear }).width(200)
      Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)


      Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
      }

      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
      }

      // scaleCount vs. scaleWidth
      Row({ space: 40 }) {
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
      }

      Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Ring }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Ring })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20 })
      }

      Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
        Progress({ value: 20, total: 150, type: ProgressType.Capsule })
          .color(Color.Grey)
          .value(50)
          .width(100)
          .height(50)
      }
    }.width('100%').margin({ top: 30 })
  }
}

progress

Example 2: Setting Ring Progress Indicator Attributes

This example demonstrates how to set attributes of a ring progress indicator using the strokeWidth and shadow properties in the style API.

// xxx.ets
@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 },
    { color: Color.Orange, offset: 1.0 }])

  build() {
    Column({ space: 15 }) {
      Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(100).style({ strokeWidth: 20 })
        .color(this.gradientColor)

      Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Ring })
        .width(120).color(Color.Orange)
        .style({ strokeWidth: 20, shadow: true })
    }.width('100%').padding({ top: 5 })
  }
}

ringProgressStyleEffect

Example 3: Setting the Animation for the Ring Progress Indicator

This example demonstrates how to enable or disable animations for a ring progress indicator using the status and enableScanEffect properties in the style API.

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 0, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Blue)
        .style({ strokeWidth: 20, status: ProgressStatus.LOADING })

      Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 30, total: 100, type: ProgressType.Ring })
        .width(100).color(Color.Orange)
        .style({ strokeWidth: 20, enableScanEffect: true })
    }.width('100%').padding({ top: 5 })
  }
}

ringProgressAnimation

Example 4: Setting Capsule Progress Indicator Attributes

This example demonstrates how to set attributes for a capsule progress indicator using properties such as borderColor, borderWidth, content, font, fontColor, enableScanEffect, and showDefaultPercentage in the style API.

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Row({ space: 40 }) {
        Progress({ value: 100, total: 100, type: ProgressType.Capsule }).width(100).height(50)
          .style({
            borderColor: Color.Blue,
            borderWidth: 1,
            content: 'Installing...',
            font: { size: 13, style: FontStyle.Normal },
            fontColor: Color.Gray,
            enableScanEffect: false,
            showDefaultPercentage: false
          })
      }
    }.width('100%').padding({ top: 5 })
  }
}

capsuleProgressStyleEffect

Example 5: Setting the Smooth Effect

This example demonstrates how to enable or disable the smooth effect for the progress animation using the enableSmoothEffect property in the style API.

// xxx.ets
@Entry
@Component
struct Index {
  @State value: number = 0;

  build() {
    Column({ space: 10 }) {
      Text('enableSmoothEffect: true')
        .fontSize(9)
        .fontColor(0xCCCCCC)
        .width('90%')
        .margin(5)
        .margin({ top: 20 })
      Progress({ value: this.value, total: 100, type: ProgressType.Linear })
        .style({ strokeWidth: 10, enableSmoothEffect: true })

      Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
      Progress({ value: this.value, total: 100, type: ProgressType.Linear })
        .style({ strokeWidth: 10, enableSmoothEffect: false })

      Button('value +10').onClick(() => {
        this.value += 10;
      })
        .width(75)
        .height(15)
        .fontSize(9)
    }
    .width('50%')
    .height('100%')
    .margin({ left: 20 })
  }
}

progressSmoothEffect

Example 6: Setting the Custom Content Area

This example implements a custom progress indicator using the contentModifier API. This progress indicator displays a star shape with a total progress value of 3, and the current value can be incremented or decremented through buttons. The achieved progress is filled with a custom color.

// xxx.ets
class MyProgressModifier implements ContentModifier<ProgressConfiguration> {
  color: ResourceColor = Color.White;

  constructor(color: ResourceColor) {
    this.color = color;
  }

  applyContent(): WrappedBuilder<[ProgressConfiguration]> {
    return wrapBuilder(myProgress);
  }
}

@Builder
function myProgress(config: ProgressConfiguration) {

  Column({ space: 30 }) {
    Text('Current progress: ' + config.value + '/' + config.total).fontSize(20)
    Row() {
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Path()
          .width('30%')
          .height('30%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >= 1 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('30%')
          .height('30%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >= 2 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width('30%')
          .height('30%')
          .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z')
          .fill(config.enabled && config.value >= 3 ? (config.contentModifier as MyProgressModifier).color :
          Color.White)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('100%')
    }
  }.margin({ bottom: 100 })
}

@Entry
@Component
struct Index {
  @State currentValue: number = 0;
  modifier = new MyProgressModifier('rgb(39, 135, 217)');
  @State myModifier: (MyProgressModifier | undefined) = this.modifier;

  build() {
    Column() {
      Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier)
      Button('Progress++').onClick(() => {
        if (this.currentValue < 3) {
          this.currentValue += 1;
        }
      }).width('30%')
      Button('Progress--').onClick(() => {
        if (this.currentValue > 0) {
          this.currentValue -= 1;
        }
      }).width('30%').margin('10')
    }.width('100%').height('100%')
  }
}

progressCustom

Example 7: Securing Sensitive Information

This example illustrates how to secure sensitive information using the privacySensitive attribute. Note that the display requires widget framework support.

@Entry
@Component
struct ProgressExample {
  build() {
    Row() {
      Column({ space: 15 }) {
        Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50)
          .color(Color.Blue)
          .style({
            borderWidth: 5,
            font: { size: 13, style: FontStyle.Normal },
            enableScanEffect: false,
            showDefaultPercentage: true
          })
          .privacySensitive(true)
        Progress({ value: 33, total: 100, type: ProgressType.Capsule }).width(300).height(50)
          .color(Color.Blue)
          .style({
            borderWidth: 5,
            content: 'Installing...',
            font: { size: 13, style: FontStyle.Normal },
            enableScanEffect: false,
          })
          .privacySensitive(true)
      }
    }
  }
}

progressSensitive

Example 8: Setting Capsule Progress Indicator Border Radius

This example demonstrates how to set the border radius of the capsule progress indicator using the input parameter borderRadius of CapsuleStyleOptions.

The borderRadius attribute is supported since API version 18.

import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Capsule Progress').fontSize(9).width('90%')
      Row({ space: 15 }) {
        Progress({ value: 30, total: 100, type: ProgressType.Capsule })
          .style({ content: 'Default radius', borderWidth: 5 })
          .width(100)
          .height(60)
      }

      Row({ space: 15 }) {
        Progress({ value: 30, total: 100, type: ProgressType.Capsule })
          .style({ content: 'Radius 20 vp', borderWidth: 5, borderRadius: LengthMetrics.vp(20) })
          .width(100)
          .height(60)
      }
    }
    .width('100%')
    .margin({ top: 30 })
  }
}

capsuleProgressBorderRadius

Example 9: Setting Attributes of Linear and Capsule Progress Indicators

This example demonstrates how to implement the gradient color of the linear progress indicator and capsule progress indicator using LinearGradient (available since API version 23) of the color attribute.

// xxx.ets
@Entry
@Component
struct ProgressExample {
  private gradientColor: LinearGradient = new LinearGradient([{ color: "#87BDF9", offset: 0.5 },
    { color: "#3662F0", offset: 1.0 }])
  public gradientColor2: LinearGradient = new LinearGradient([{ color: "#A5A5AF", offset: 0.5 }, 
    { color: "#67666C", offset: 1.0 }])

  build() {
    Column({ space: 15 }) {
      Text('Linear: ').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 70, total: 100, type: ProgressType.Linear })
        .width(100).style({ strokeWidth: 20 })
        .color(this.gradientColor)

      Text('Capsule: ').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 50, total: 100, type: ProgressType.Capsule })
        .width(120).style({ strokeWidth: 40 })
        .color(this.gradientColor2)
    }.width('100%').padding({ top: 5 })
  }
}

linearProgressGradient