Crazy loading
A reactive loading indicator with a logo or icon and environment colors.
Keep your logo visible while your workspace loads, with a reactive component built on Materialize Loading.
Logo, icon, or spinner
The same expanding ring as Loading, packaged as a web component. The logo stays still. Loading starts automatically.
<crazy-loading size="small" label="Loading"></crazy-loading>
<crazy-loading icon-text="cloud_sync" label="Syncing files"></crazy-loading>
<crazy-loading size="large" image="images/materialize.svg" label="Loading workspace"></crazy-loading>Start and finish
Finish hides the ring and retains the logo. The component keeps the status label and aria-busy in sync.
Workspace ready.
<crazy-loading id="loading-component-demo" image="images/materialize.svg" active="false" label="Loading workspace…" complete-label="Workspace ready"></crazy-loading>
<p id="loading-component-status" role="status">Workspace ready.</p>
<button id="loading-component-start" class="btn filled" type="button">Start loading</button>
<button id="loading-component-stop" class="btn outlined" type="button" disabled>Finish loading</button>Environment colors
Colors inherit from the surrounding Material theme, including dark mode. Use the library’s ColorInput picker and select Save to change the ring and icon.
<div class="input-field">
<input id="loading-accent" type="color" data-color-picker="pickr" data-color-theme="nano" data-color-opacity="false" value="#6750a4">
<label for="loading-accent">Local accent</label>
</div>
<div id="loading-environment" style="--md-sys-color-primary: #6750a4;">
<crazy-loading icon-text="palette" label="Preparing the environment"></crazy-loading>
<crazy-loading image="images/materialize.svg" label="Loading assets"></crazy-loading>
</div>Custom size and content
Use the same four CSS properties as Loading on the custom element. Child content replaces the image/icon fallback and retains its identity across updates.
<crazy-loading label="Preparing your project" icon-text="auto_awesome" style="--loading-size: 9rem; --loading-color: var(--md-sys-color-tertiary); --loading-background: var(--md-sys-color-tertiary-container); --loading-thickness: 5px;"></crazy-loading>
<crazy-loading label="Loading review"><strong>FX</strong></crazy-loading>Legacy compatibility
The alias loading-screen-btn retains the original 10rem size and defaults to /asset/favicon/android-chrome-192x192.png. This example overrides the image with the documentation logo. The original component had no configurable attributes; both tags now support the API below.
<loading-screen-btn image="images/materialize.svg" label="Loading workspace"></loading-screen-btn>Setup and API
Load Materialize CSS and import CrazyLoading from kmaterialize. Both tags register automatically. The component extends Kmcomponent and initializes the library’s Loading internally. Its internal indicator opts out of AutoInit and releases its Loading instance when updated or disconnected.
import { CrazyLoading } from 'kmaterialize';
const loading = document.querySelector<CrazyLoading>('crazy-loading')!;
loading.start('Refreshing assets…');
await loading.updateComplete;
console.log(loading.isActive); // true
// When the operation finishes:
loading.stop('Assets ready');
await loading.updateComplete;
// Attributes and typed properties are reactive too:
loading.setAttribute('image', '/images/project-logo.svg');
loading.setProperty('size', 'small');
loading.setProperty('active', false);| Attribute | Values / default |
|---|---|
| active | true by default. Use active="false" or "0" to stop; presence, "true", or "1" starts. Removing the attribute restores the default. |
| size | small (4rem), normal (7rem, default), large (10rem). The legacy alias defaults to large. |
| label / complete-label | Loading… / Ready. Accessible status while active / finished. |
| aria-label | Optional override for the active status label; omit when using start(label). |
| image | Logo URL, empty by default. Takes precedence over icon-text. Images are decorative; label describes the status. |
| icon-text / icon-class | Icon text, empty by default / material-icons. Load the corresponding icon font in your application. |
| hidden | Native hidden attribute hides the whole component without changing its active state. |
| CSS property | Default |
|---|---|
| --loading-size | 7rem, or the chosen size |
| --loading-color | Environment primary color (ring and icon) |
| --loading-background | Environment surface container, falling back to surface |
| --loading-thickness | 3px |
start(label?), stop(label?), and isActive mirror Loading. Attribute/property changes render in a microtask; await updateComplete before inspecting the DOM. Supplied start/stop labels remain in their respective properties for later calls. The runtime cleans up automatically; remove the element when its view is no longer needed.
The indicator exposes a polite status and aria-busy. Decorative content is hidden from assistive technology. Reduced-motion preferences keep the ring visible without rotation. Use a separate button for actions. The old fixed purple ring and light/dark palette are replaced by environment colors; existing legacy container/logo class hooks are retained.