Loading

Keep your logo visible while content loads. Loading uses the same expanding and contracting spinner animation as Preloader, around a stationary image or icon.

Loading your workspace…

The indicator works with CSS alone using the standard Preloader markup below. Toggle active on the outer loading element to show or hide the spinner; keep active on the inner preloader-wrapper. Place your image inside loading-content, or leave the content out for a plain spinner.

<div class="loading active" role="status" aria-label="Loading workspace" aria-busy="true">
  <div class="preloader-wrapper active" aria-hidden="true">
    <div class="spinner-layer">
      <div class="circle-clipper left"><div class="circle"></div></div>
      <div class="gap-patch"><div class="circle"></div></div>
      <div class="circle-clipper right"><div class="circle"></div></div>
    </div>
  </div>
  <span class="loading-content">
    <img src="images/materialize.svg" alt="">
  </span>
</div>

Use loading-small (4rem), the default (7rem), or loading-large (10rem). Images fit inside the ring without being stretched.

Small · spinner

Default · icon

Large · logo

<div class="loading loading-small active" role="status" aria-label="Loading" aria-busy="true">
  <div class="preloader-wrapper active" aria-hidden="true">
    <div class="spinner-layer">
      <div class="circle-clipper left"><div class="circle"></div></div>
      <div class="gap-patch"><div class="circle"></div></div>
      <div class="circle-clipper right"><div class="circle"></div></div>
    </div>
  </div>
</div>

<div class="loading active" role="status" aria-label="Syncing files" aria-busy="true">
  <div class="preloader-wrapper active" aria-hidden="true">
    <div class="spinner-layer">
      <div class="circle-clipper left"><div class="circle"></div></div>
      <div class="gap-patch"><div class="circle"></div></div>
      <div class="circle-clipper right"><div class="circle"></div></div>
    </div>
  </div>
  <span class="loading-content">
    <i class="material-icons" aria-hidden="true">cloud_sync</i>
  </span>
</div>

Colors follow the current theme, including dark mode. Override these CSS properties on an individual indicator to match your brand.

.loading {
  --loading-size: 9rem;
  --loading-color: var(--md-sys-color-tertiary);
  --loading-background: var(--md-sys-color-tertiary-container);
  --loading-thickness: 5px;
}

Property	Default	Purpose
`--loading-size`	7rem	Width and height of the indicator.
`--loading-color`	Theme primary	Ring and icon color.
`--loading-background`	Theme surface container	Circular background.
`--loading-thickness`	3px	Ring stroke width.

Initialize Loading to keep the animation and accessible status in sync. The JavaScript API adds the Preloader markup automatically when it is missing. Stopping hides the ring and keeps your logo visible.

Ready to load.

const loading = M.Loading.init(document.querySelector('#loading-demo'), {
  active: false,
  label: 'Loading workspace…',
  completeLabel: 'Workspace ready'
});

loading.start();
// When your operation finishes:
loading.stop();

// Override the status for a specific operation:
loading.start('Refreshing assets…');
loading.stop('Assets ready');

For ES modules, use import { Loading } from 'kmaterialize'. M.AutoInit() initializes .loading elements automatically; add no-autoinit when initializing manually.

Options

Option	Default	Description
`active`	true	Start animating on initialization.
`label`	Loading…	Accessible loading status. Uses the element’s existing aria-label when this option is omitted.
`completeLabel`	Ready	Accessible status after stopping.

Methods and properties

API	Description
`start(label?)`	Animate the ring and set aria-busy to true.
`stop(label?)`	Hide the ring and set aria-busy to false.
`isActive`	Read whether the indicator is active.
`Loading.getInstance(element)`	Retrieve an initialized instance.
`destroy()`	Remove the instance and restore the original classes and accessibility attributes.

Give the indicator a meaningful status using aria-label. Keep decorative images empty with alt="", and hide decorative icons from assistive technology with aria-hidden="true".

For CSS-only usage, update aria-busy and the status label when toggling active. The JavaScript API handles these attributes for you. If a separate region is being updated, manage that region’s aria-busy as part of your operation too.

When the user requests reduced motion, the ring stays visible without rotating. Loading is a status indicator; use a separate button for actions.

For linear progress bars and traditional circular spinners, see Preloader.

Show progress with an animated circular indicator around your logo or icon.

Basic usage

Sizes and content

Customization

JavaScript controls

Options

Methods and properties

Accessibility