# Progress Indicator Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. It is commonly seen in design patterns like: File uploads, Password strength etc. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-indicator--introduction ## Variants documented in Storybook - ProgressBars: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-indicator--progressbars - ProgressCircles: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-indicator--progresscircles - ProgressHalfCircles: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-indicator--progresshalfcircles ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Progress Indicator. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Progress Indicators

Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. It is commonly seen in design patterns like: File uploads, Password strength etc.

Implementation Showcase

Visual demonstration of various progress indicators including bars, circles, and half circles.

Progress Bar (Sharp) - Outside

Sharp bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Sharp) - Inside

Sharp bars with inside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Outside

Rounded bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Inside

Rounded bars with inside label placement.

0%
10%
50%
100%

Progress Circle (Inside)

Rings across all Figma sizes with inside label placement.

XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

Progress Circle (Outside)

Rings across all Figma sizes with outside label placement.

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

Progress Half Circle (Sharp)

Half-circle indicators with sharp treatment.

Size S
Size M
Size L
Size XL

Progress Half Circle (Rounded)

Half-circle indicators with rounded treatment.

Size S
Size M
Size L
Size XL

CSS Class & Data Attributes Reference

Quickly copy sizing and variant data attributes for Progress Indicators.

Component Roles

Progress Bar data-ux-progress-bar
Progress Circle data-ux-progress-circle
Progress Half Circle data-ux-progress-half
Progress Value data-ux-progress="0-100"

Shapes

Sharp data-ux-shape="sharp"
Rounded data-ux-shape="rounded"

Label Placement

Outside data-ux-label-placement="outside"
Inside data-ux-label-placement="inside"
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample1Demo = () => ( <>
Components

Progress Indicators

Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. It is commonly seen in design patterns like: File uploads, Password strength etc.

Implementation Showcase

Visual demonstration of various progress indicators including bars, circles, and half circles.

Progress Bar (Sharp) - Outside

Sharp bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Sharp) - Inside

Sharp bars with inside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Outside

Rounded bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Inside

Rounded bars with inside label placement.

0%
10%
50%
100%

Progress Circle (Inside)

Rings across all Figma sizes with inside label placement.

XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

Progress Circle (Outside)

Rings across all Figma sizes with outside label placement.

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

Progress Half Circle (Sharp)

Half-circle indicators with sharp treatment.

Size S
Size M
Size L
Size XL

Progress Half Circle (Rounded)

Half-circle indicators with rounded treatment.

Size S
Size M
Size L
Size XL

CSS Class & Data Attributes Reference

Quickly copy sizing and variant data attributes for Progress Indicators.

{/* Variant Attributes */}

Component Roles

Progress Bar data-ux-progress-bar
Progress Circle data-ux-progress-circle
Progress Half Circle data-ux-progress-half
Progress Value data-ux-progress="0-100"
{/* Shapes */}

Shapes

Sharp data-ux-shape="sharp"
Rounded data-ux-shape="rounded"
{/* Label Placement */}

Label Placement

Outside data-ux-label-placement="outside"
Inside data-ux-label-placement="inside"
); export default ProgressIndicatorExample1Demo; ``` Angular: ```html
Components

Progress Indicators

Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. It is commonly seen in design patterns like: File uploads, Password strength etc.

Implementation Showcase

Visual demonstration of various progress indicators including bars, circles, and half circles.

Progress Bar (Sharp) - Outside

Sharp bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Sharp) - Inside

Sharp bars with inside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Outside

Rounded bars with outside label placement.

0%
10%
50%
100%

Progress Bar (Rounded) - Inside

Rounded bars with inside label placement.

0%
10%
50%
100%

Progress Circle (Inside)

Rings across all Figma sizes with inside label placement.

XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

Progress Circle (Outside)

Rings across all Figma sizes with outside label placement.

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

Progress Half Circle (Sharp)

Half-circle indicators with sharp treatment.

Size S
Size M
Size L
Size XL

Progress Half Circle (Rounded)

Half-circle indicators with rounded treatment.

Size S
Size M
Size L
Size XL

CSS Class & Data Attributes Reference

Quickly copy sizing and variant data attributes for Progress Indicators.

Component Roles

Progress Bar data-ux-progress-bar
Progress Circle data-ux-progress-circle
Progress Half Circle data-ux-progress-half
Progress Value data-ux-progress="0-100"

Shapes

Sharp data-ux-shape="sharp"
Rounded data-ux-shape="rounded"

Label Placement

Outside data-ux-label-placement="outside"
Inside data-ux-label-placement="inside"
``` ### 2. Progress Bars — Progress Bars (Sharp) - Outside HTML: ```html
0%
10%
50%
100%
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample2Demo = () => ( <>
0%
10%
50%
100%
); export default ProgressIndicatorExample2Demo; ``` Angular: ```html
0%
10%
50%
100%
``` ### 3. Progress Bars — Progress Bars (Sharp) - Inside HTML: ```html
0%
10%
50%
100%
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample3Demo = () => ( <>
0%
10%
50%
100%
); export default ProgressIndicatorExample3Demo; ``` Angular: ```html
0%
10%
50%
100%
``` ### 4. Progress Bars — Progress Bars (Rounded) - Outside HTML: ```html
0%
10%
50%
100%
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample4Demo = () => ( <>
0%
10%
50%
100%
); export default ProgressIndicatorExample4Demo; ``` Angular: ```html
0%
10%
50%
100%
``` ### 5. Progress Bars — Progress Bars (Rounded) - Inside HTML: ```html
0%
10%
50%
100%
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample5Demo = () => ( <>
0%
10%
50%
100%
); export default ProgressIndicatorExample5Demo; ``` Angular: ```html
0%
10%
50%
100%
``` ### 6. Progress Circles — Progress Circles (Inside Label) HTML: ```html
XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

``` React: ```jsx import React from 'react'; const ProgressIndicatorExample6Demo = () => ( <>
XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

); export default ProgressIndicatorExample6Demo; ``` Angular: ```html
XS
50%
S
50%
M
50%
L
50%
XL
50%

Description

2XL
50%

Description

3XL
50%

Description

``` ### 7. Progress Circles — Progress Circles (Outside Label) HTML: ```html
50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

``` React: ```jsx import React from 'react'; const ProgressIndicatorExample7Demo = () => ( <>
50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

); export default ProgressIndicatorExample7Demo; ``` Angular: ```html
50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

50%

Description

``` ### 8. Progress Half Circles — Progress Half Circles (Sharp) HTML: ```html
Size S
Size M
Size L
Size XL
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample8Demo = () => ( <>
Size S
Size M
Size L
Size XL
); export default ProgressIndicatorExample8Demo; ``` Angular: ```html
Size S
Size M
Size L
Size XL
``` ### 9. Progress Half Circles — Progress Half Circles (Rounded) HTML: ```html
Size S
Size M
Size L
Size XL
``` React: ```jsx import React from 'react'; const ProgressIndicatorExample9Demo = () => ( <>
Size S
Size M
Size L
Size XL
); export default ProgressIndicatorExample9Demo; ``` Angular: ```html
Size S
Size M
Size L
Size XL
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.