The m3e-loading-indicator component shows indeterminate progress for a short wait time. It uses animation to grab attention, mitigate perceived latency, and indicate that an activity is in progress.

npm i @m3e/loading-indicator

This section outlines usage examples and configuration guidance for the components in this package.

There are two loading indicator appearance variants: uncontained (default) and contained. Use the variant attribute to change the appearance.

<m3e-loading-indicator></m3e-loading-indicator>
<m3e-loading-indicator variant="contained"></m3e-loading-indicator>

The m3e-loading-indicator implements the ARIA role="progressbar" pattern. By default, the component sets aria-valuemin to 0 and aria-valuemax to 100.

Always provide an accessible label via aria-label or aria-labelledby for each loading indicator.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/loading-indicator/dist/index.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.