spinner
Use class="spinner" on an SVG with an accessible label. Place it in an
output when status semantics are needed.
<svg aria-label="Loading" viewBox="0 0 24 24" class="spinner">
<circle cx="12" cy="12" r="10" />
</svg>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Spinner</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="spinner-demo">
<div class="visual-example">
<article variant="muted" class="item">
<figure>
<svg
viewBox="0 0 24 24"
fill="none"
aria-live="polite"
aria-label="Loading"
aria-busy="true"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</figure>
<section>
<h3>Processing payment...</h3>
</section>
<section class="spinner-amount">
<span>$100.00</span>
</section>
</article>
</div>
</body>
</html>
Composition workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Spinner Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="spinner-badge spinner-button spinner-custom spinner-empty spinner-input-group spinner-rtl spinner-size input-group-spinner"
>
<main class="spinner-workflows">
<div class="workflow-row" aria-label="Spinner sizes">
<svg
id="processing-spinner"
aria-live="assertive"
aria-label="Processing data"
style="width: 12px; height: 12px"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="spinner">
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<svg
aria-hidden="true"
style="width: 24px; height: 24px"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<svg
aria-hidden="true"
style="width: 32px; height: 32px"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
<div class="workflow-row" aria-label="Spinner badges">
<span class="badge"
><svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Syncing</span
>
<span variant="secondary" class="badge"
><svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Updating</span
>
<span variant="outline" class="badge"
><svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Processing</span
>
</div>
<div class="workflow-buttons-column" aria-label="Spinner buttons">
<button disabled size="sm">
<svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Loading...
</button>
<button variant="outline" disabled size="sm">
<svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Please wait
</button>
<button variant="secondary" disabled size="sm">
<svg
icon="inline-start"
viewBox="0 0 24 24"
fill="none"
class="spinner"
>
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/></svg
>Processing
</button>
</div>
<section class="spinner-empty-demo empty" aria-live="polite">
<header>
<figure variant="icon">
<svg viewBox="0 0 24 24" fill="none" class="spinner">
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</figure>
<h2>Processing your request</h2>
<p>
Please wait while we process your request. Do not refresh the page.
</p>
</header>
<section>
<button variant="outline" size="sm">Cancel</button>
</section>
</section>
<div class="workflow-input-groups" aria-label="Spinner input groups">
<div class="input-group">
<input placeholder="Searching..." />
<div align="inline-end">
<svg viewBox="0 0 24 24" fill="none" class="spinner">
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
</div>
<div class="input-group">
<input placeholder="Saving changes..." />
<div align="inline-end">
<span>Saving...</span
><svg viewBox="0 0 24 24" fill="none" class="spinner">
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</div>
</div>
</div>
<article variant="muted" class="spinner-rtl-demo item" dir="rtl">
<figure>
<svg viewBox="0 0 24 24" fill="none" class="spinner">
<path
d="M21 12a9 9 0 1 1-6.22-8.56"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</figure>
<section>
<h3>جاري معالجة الدفع...</h3>
</section>
<section class="spinner-amount">
<span>١٠٠.٠٠ دولار</span>
</section>
</article>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Authored status indicator.
Anatomy
Root styling selector
.spinner
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
size | Authored | Spinner size: sm or lg; omit for the default size. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Authored status indicator. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use the appropriate live-region or status semantics for dynamic feedback. Decorative feedback must stay hidden from assistive technology.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.