jb-loading

SVG loading spinner web component.

• Fills its host size.
• Uses a lightweight SVG animation.
• Customizable with CSS variables.
• Works as a standalone web component or inside other JB components.

When to use

Use jb-loading for a visual loading indicator inside a button, empty state, panel, or page area. See it in the component examples.

Pair it with text, aria-busy, or aria-live on the surrounding UI when users need an accessible loading announcement.

Demo

Try the Storybook examples or open the GitHub Pages demo.

Using With JS Frameworks

See the React API and examples.

Other integrations: Angular · Vue · Nuxt · Svelte · SvelteKit · SolidJS · Lit · Next.js · Astro · Blazor · Server-rendered templates · WordPress · Alpine.js and HTMX

Installation

Using npm

npm i jb-loading

import 'jb-loading';

<jb-loading></jb-loading>

Using CDN

<script src="https://cdn.jsdelivr.net/npm/jb-loading/dist/JBLoading.umd.js"></script>
<jb-loading></jb-loading>

API reference

Attributes

jb-loading does not currently define public HTML attributes.

Properties

jb-loading does not currently define public JavaScript properties.

Methods

jb-loading does not currently define public methods.

Events

The lifecycle example verifies both events dispatched when the component connects. Demo

| event | detail | description | | --- | --- | --- | | load | none | Dispatched from connectedCallback when the component is connected. | | init | none | Dispatched from connectedCallback after load. |

Slots and CSS parts

jb-loading does not expose public slots. Its CSS parts are demonstrated in the style gallery:

| CSS part | description | | --- | --- | | loading-wrapper | Wrapper around the spinner SVG. | | loading-svg | Animated spinner SVG. | | loading-circle | Visible spinner circle. |

Custom style

For complete styling guidance, live examples, and copyable style recipes, see the Styling guide and style gallery.

Set CSS variables in the parent scope of the component.

| CSS variable name | description | | --- | --- | | --jb-loading-color | Spinner stroke color. | | --jb-loading-width | Host width. Default is 100%. | | --jb-loading-height | Host height. Default is 100%. |

jb-loading {
  --jb-loading-width: 2.75rem;
  --jb-loading-height: 2.75rem;
  --jb-loading-color: var(--jb-primary);
}

Accessibility notes

jb-loading is a visual spinner. Add accessible loading semantics to the surrounding UI when needed. Accessible usage example

<div aria-busy="true" aria-live="polite">
  <jb-loading style="--jb-loading-width: 1.5rem; --jb-loading-height: 1.5rem;"></jb-loading>
  <span>Loading</span>
</div>

Related Docs

• See jb-loading/react if you want to use this component in React.
• See All JB Design System Component List for more components.
• Use Contribution Guide if you want to contribute to this component.

AI agent notes

• Import jb-loading once before using <jb-loading>.
• Do not expect attributes, properties, methods, or slots; customize with CSS variables and the documented CSS parts.
• Set size with --jb-loading-width and --jb-loading-height or you can set width/height directly.
• Set color with --jb-loading-color.
• Add accessible loading text or state outside the component when the loading state must be announced.
• This package includes custom-elements.json and points to it with the package.json customElements field. The field is documented by the Custom Elements Manifest project in Referencing manifests from npm packages.
• In custom-elements.json, exports.kind: "js" describes the JavaScript/TypeScript class export and exports.kind: "custom-element-definition" maps the jb-loading tag name to that class.