lion/packages/progress-indicator

Progress Indicator

lion-progress-indicator implements accessibility requirements for progress indicators.

import { html } from '@lion/core';
import './demo/custom-progress-indicator.js';

export default {
  title: 'Others/Progress Indicator',
};

Features

• Accessibility compliant
• Localized "Loading" label
• Implementation independent of visuals

How to use

Installation

npm i --save @lion/progress-indicator

import { LionProgressIndicator } from '@lion/progress-indicator';
// or
import '@lion/progress-indicator/lion-progress-indicator.js';

Example

<lion-progress-indicator></lion-progress-indicator>

Extended indicator with a custom visual

LionProgressIndicator is designed to be extended to add visuals. Implement the _graphicTemplate method to set the rendered content, and apply styles normally.

Example extension

class CustomProgressIndicator extends LionProgressIndicator {
  static get styles() {
    return [
      css`
        svg {
          animation: spinner-rotate 2s linear infinite;
          display: inline-block;
          height: 48px;
          width: 48px;
        }

        circle {
          fill: none;
          stroke-width: 3.6;
          stroke: firebrick;
          stroke-dasharray: 100, 28;
        }

        @keyframes spinner-rotate {
          to {
            transform: rotate(360deg);
          }
        }
      `,
    ];
  }

  _graphicTemplate() {
    return html`<svg viewBox="22 22 44 44">
      <circle cx="44" cy="44" r="20.2" />
    </svg>`;
  }
}

Result

export const customProgressDemo = () => html`
  <custom-progress-indicator></custom-progress-indicator>
`;