# Spinner Spinner component is a visual indicator used to represent loading, processing or system activity. It provides feedback to users that an operation is in progress and helps prevent confusion when waiting for content to load. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-spinner--introduction ## Variants documented in Storybook - SpinnerTypes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-spinner--spinnertypes - SpinnerSizes: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-spinner--spinnersizes ## 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 Spinner. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Components

Spinner

Spinner component is a visual indicator used to represent loading, processing or system activity. It provides feedback to users that an operation is in progress and helps prevent confusion when waiting for content to load.

Visual Showcase

Explore the core styles and animation variants available in the design system.

Primary Variants

Full

Split

Partial

Inverse Variants

Full

Split

Partial

CSS Class Reference

Quickly copy semantic and scale classes for Spinners.

Semantic Variant Classes

Intent	Classes
primary	`ux4g-spinner-primary-full` `ux4g-spinner-primary-split` `ux4g-spinner-primary-partial`
inverse	`ux4g-spinner-inverse-full` `ux4g-spinner-inverse-split` `ux4g-spinner-inverse-partial`
danger	`ux4g-spinner-danger-full` `ux4g-spinner-danger-split` `ux4g-spinner-danger-partial`

Scale Utility Classes

Size Name	Utility Class
Extra Large	`ux4g-spinner-xl`
Large	`ux4g-spinner-lg`
Medium	`ux4g-spinner-md`
Small	`ux4g-spinner-sm`
Extra Small	`ux4g-spinner-xs`

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

Components

Spinner

Visual Showcase

Explore the core styles and animation variants available in the design system.

Primary Variants

Full

Split

Partial

Inverse Variants

Full

Split

Partial

CSS Class Reference

Quickly copy semantic and scale classes for Spinners.

{/* Type & Animation Classes */}

Semantic Variant Classes

Intent	Classes
primary	`ux4g-spinner-primary-full` `ux4g-spinner-primary-split` `ux4g-spinner-primary-partial`
inverse	`ux4g-spinner-inverse-full` `ux4g-spinner-inverse-split` `ux4g-spinner-inverse-partial`
danger	`ux4g-spinner-danger-full` `ux4g-spinner-danger-split` `ux4g-spinner-danger-partial`

{/* Scale Utility Classes */}

Scale Utility Classes

Size Name	Utility Class
Extra Large	`ux4g-spinner-xl`
Large	`ux4g-spinner-lg`
Medium	`ux4g-spinner-md`
Small	`ux4g-spinner-sm`
Extra Small	`ux4g-spinner-xs`

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

Components

Spinner

Visual Showcase

Explore the core styles and animation variants available in the design system.

Primary Variants

Full

Split

Partial

Inverse Variants

Full

Split

Partial

CSS Class Reference

Quickly copy semantic and scale classes for Spinners.

Semantic Variant Classes

Intent	Classes
primary	`ux4g-spinner-primary-full` `ux4g-spinner-primary-split` `ux4g-spinner-primary-partial`
inverse	`ux4g-spinner-inverse-full` `ux4g-spinner-inverse-split` `ux4g-spinner-inverse-partial`
danger	`ux4g-spinner-danger-full` `ux4g-spinner-danger-split` `ux4g-spinner-danger-partial`

Scale Utility Classes

Size Name	Utility Class
Extra Large	`ux4g-spinner-xl`
Large	`ux4g-spinner-lg`
Medium	`ux4g-spinner-md`
Small	`ux4g-spinner-sm`
Extra Small	`ux4g-spinner-xs`

``` ### 2. Spinner Sizes — Primary Sizes HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample2Demo = () => ( <> {/* Variant: Primary Spinner - Full - Extra Large */} {/* Variant: Primary Spinner - Full - Large */} {/* Variant: Primary Spinner - Full - Medium */} {/* Variant: Primary Spinner - Full - Small */} {/* Variant: Primary Spinner - Full - Extra Small */} {/* Variant: Primary Spinner - Split - Extra Large */} {/* Variant: Primary Spinner - Split - Large */} {/* Variant: Primary Spinner - Split - Medium */} {/* Variant: Primary Spinner - Split - Small */} {/* Variant: Primary Spinner - Split - Extra Small */} {/* Variant: Primary Spinner - Partial - Extra Large */} {/* Variant: Primary Spinner - Partial - Large */} {/* Variant: Primary Spinner - Partial - Medium */} {/* Variant: Primary Spinner - Partial - Small */} {/* Variant: Primary Spinner - Partial - Extra Small */} ); export default SpinnerExample2Demo; ``` Angular: ```html ``` ### 3. Spinner Sizes — Inverse Sizes HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample3Demo = () => ( <> {/* Variant: Inverse Spinner - Full - Extra Large */} {/* Variant: Inverse Spinner - Full - Large */} {/* Variant: Inverse Spinner - Full - Medium */} {/* Variant: Inverse Spinner - Full - Small */} {/* Variant: Inverse Spinner - Full - Extra Small */} {/* Variant: Inverse Spinner - Split - Extra Large */} {/* Variant: Inverse Spinner - Split - Large */} {/* Variant: Inverse Spinner - Split - Medium */} {/* Variant: Inverse Spinner - Split - Small */} {/* Variant: Inverse Spinner - Split - Extra Small */} {/* Variant: Inverse Spinner - Partial - Extra Large */} {/* Variant: Inverse Spinner - Partial - Large */} {/* Variant: Inverse Spinner - Partial - Medium */} {/* Variant: Inverse Spinner - Partial - Small */} {/* Variant: Inverse Spinner - Partial - Extra Small */} ); export default SpinnerExample3Demo; ``` Angular: ```html ``` ### 4. Spinner Sizes — Danger Sizes HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample4Demo = () => ( <> {/* Variant: Danger Spinner - Full - Extra Large */} {/* Variant: Danger Spinner - Full - Large */} {/* Variant: Danger Spinner - Full - Medium */} {/* Variant: Danger Spinner - Full - Small */} {/* Variant: Danger Spinner - Full - Extra Small */} {/* Variant: Danger Spinner - Split - Extra Large */} {/* Variant: Danger Spinner - Split - Large */} {/* Variant: Danger Spinner - Split - Medium */} {/* Variant: Danger Spinner - Split - Small */} {/* Variant: Danger Spinner - Split - Extra Small */} {/* Variant: Danger Spinner - Partial - Extra Large */} {/* Variant: Danger Spinner - Partial - Large */} {/* Variant: Danger Spinner - Partial - Medium */} {/* Variant: Danger Spinner - Partial - Small */} {/* Variant: Danger Spinner - Partial - Extra Small */} ); export default SpinnerExample4Demo; ``` Angular: ```html ``` ### 5. Spinner Types — Primary HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample5Demo = () => ( <> {/* Variant: Primary Spinner - Full */} {/* Variant: Primary Spinner - Split */} {/* Variant: Primary Spinner - Partial */} ); export default SpinnerExample5Demo; ``` Angular: ```html ``` ### 6. Spinner Types — Inverse HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample6Demo = () => ( <> {/* Variant: Inverse Spinner - Full */} {/* Variant: Inverse Spinner - Split */} {/* Variant: Inverse Spinner - Partial */} ); export default SpinnerExample6Demo; ``` Angular: ```html ``` ### 7. Spinner Types — Danger HTML: ```html ``` React: ```jsx import React from 'react'; const SpinnerExample7Demo = () => ( <> {/* Variant: Danger Spinner - Full */} {/* Variant: Danger Spinner - Split */} {/* Variant: Danger Spinner - Partial */} ); export default SpinnerExample7Demo; ``` Angular: ```html ``` ## 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.