jb-loading

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

attribute	values	default	description
size	xs, sm, md, lg, xl	md	Sets the spinner size.
color	primary, secondary, neutral, content-inverse, content-primary, content-secondary	neutral	Sets the spinner color.

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-color-primary	Color of the primary variant.
--jb-loading-color-secondary	Color of the secondary variant.
--jb-loading-color-neutral	Color of the neutral variant.
--jb-loading-color-content-inverse	Color of the content-inverse variant.
--jb-loading-color-content-primary	Color of the content-primary variant.
--jb-loading-color-content-secondary	Color of the content-secondary variant.
--jb-loading-width	Host width. Defaults to the selected size.
--jb-loading-height	Host height. Defaults to the selected size.
--jb-loading-size-xs	Size of the xs variant. Defaults to 1rem.
--jb-loading-size-sm	Size of the sm variant. Defaults to 1.25rem.
--jb-loading-size-md	Size of the md variant. Defaults to 1.5rem.
--jb-loading-size-lg	Size of the lg variant. Defaults to 2rem.
--jb-loading-size-xl	Size of the xl variant. Defaults to 3rem.

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>.
• The size attribute supports xs, sm, md, lg, and xl; it defaults to md.
• 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.