# Progress SLA Indicator An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-sla-indicator--introduction ## Variants documented in Storybook - CircularSlaProgress: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-sla-indicator--circularslaprogress - LinearSlaProgress: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-sla-indicator--linearslaprogress - CompactListBadge: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-sla-indicator--compactlistbadge ## 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 SLA Indicator. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Circular Sla Progress — SLA Circular Progress HTML: ```html

Label

Description

Label

Description

Label

Description

Label

Description

Label

``` React: ```jsx import React from 'react'; const ProgressSLAIndicatorExample1Demo = () => ( <>

{/* Variant: SLA Circular - default */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Warning */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Error */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Success */}

8 days left

Label

Description

Label

); export default ProgressSLAIndicatorExample1Demo; ``` Angular: ```html

Label

Description

Label

Description

Label

Description

Label

Description

Label

``` ### 2. Compact List Badge — Compact List Badge HTML: ```html

Rectangular

Label Status Label Status Label Status Label Status Label Status Label Status

Pill

Label Status Label Status Label Status Label Status Label Status Label Status

``` React: ```jsx import React from 'react'; const ProgressSLAIndicatorExample2Demo = () => ( <>

Rectangular

{/* Variant: SLA Compact Badge - Rectangular - default */} Label Status {/* Variant: SLA Compact Badge - Rectangular - Warning */} Label Status {/* Variant: SLA Compact Badge - Rectangular - Error */} Label Status {/* Variant: SLA Compact Badge - Rectangular - Success */} Label Status {/* Variant: SLA Compact Badge - Rectangular - Info */} Label Status {/* Variant: SLA Compact Badge - Rectangular - disabled */} Label Status

Pill

{/* Variant: SLA Compact Badge - Pill - default */} Label Status {/* Variant: SLA Compact Badge - Pill - Warning */} Label Status {/* Variant: SLA Compact Badge - Pill - Error */} Label Status {/* Variant: SLA Compact Badge - Pill - Success */} Label Status {/* Variant: SLA Compact Badge - Pill - Info */} Label Status {/* Variant: SLA Compact Badge - Pill - disabled */} Label Status

); export default ProgressSLAIndicatorExample2Demo; ``` Angular: ```html

Rectangular

Label Status Label Status Label Status Label Status Label Status Label Status

Pill

Label Status Label Status Label Status Label Status Label Status Label Status

``` ### 3. Introduction — Introduction HTML: ```html

Components

SLA Progress Indicator

An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information.

Pattern Summary

Circular indicators, linear tracks, and compact badges communicate SLA urgency through a consistent set of status styles.

SLA Circular Progress

Label

Description

Label

Description

Label

Description

Label

Description

Label

Linear Progress

Sharp

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Rounded

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Compact List Badge

Rectangular

Label Status Label Status Label Status Label Status Label Status Label Status

Pill

Label Status Label Status Label Status Label Status Label Status Label Status

``` React: ```jsx import React from 'react'; const ProgressSLAIndicatorExample3Demo = () => ( <>

Components

SLA Progress Indicator

An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information.

Pattern Summary

Circular indicators, linear tracks, and compact badges communicate SLA urgency through a consistent set of status styles.

SLA Circular Progress

{/* Variant: SLA Circular - default */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Warning */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Error */}

8 days left

Label

Description

Label

{/* Variant: SLA Circular - Success */}

8 days left

Label

Description

Label

Linear Progress

Sharp

{/* Variant: SLA Linear - Sharp - default */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Warning */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Error */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Success */}

token

Label

Hint

50%

Rounded

{/* Variant: SLA Linear - Rounded - default */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Warning */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Error */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Success */}

token

Label

Hint

50%

Compact List Badge

Rectangular

Pill

); export default ProgressSLAIndicatorExample3Demo; ``` Angular: ```html

Components

SLA Progress Indicator

An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information.

Pattern Summary

Circular indicators, linear tracks, and compact badges communicate SLA urgency through a consistent set of status styles.

SLA Circular Progress

Label

Description

Label

Description

Label

Description

Label

Description

Label

Linear Progress

Sharp

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Rounded

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Compact List Badge

Rectangular

Label Status Label Status Label Status Label Status Label Status Label Status

Pill

Label Status Label Status Label Status Label Status Label Status Label Status

``` ### 4. Linear Sla Progress — SLA Linear Progress HTML: ```html

Sharp

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Rounded

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

``` React: ```jsx import React from 'react'; const ProgressSLAIndicatorExample4Demo = () => ( <>

Sharp

{/* Variant: SLA Linear - Sharp - default */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Warning */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Error */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Sharp - Success */}

token

Label

Hint

50%

Rounded

{/* Variant: SLA Linear - Rounded - default */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Warning */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Error */}

token

Label

Hint

50%

{/* Variant: SLA Linear - Rounded - Success */}

token

Label

Hint

50%

); export default ProgressSLAIndicatorExample4Demo; ``` Angular: ```html

Sharp

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Rounded

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

Label

Hint

50%

``` ## 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.