progress indicator

See an article on piccalil.li/blog

• install
• example
• use
  • JS
  • CSS

install

npm i -S @substrate-system/progress-indicator

example

See ./example/index.html.

See the demonstration.

This takes an attribute progress, which is a percent number from 0 - 100.

<progress-indicator progress="10">
  <div role="alert" aria-live="polite">
    <p>Loading, please wait…</p>
  </div>
</progress-indicator>

use

JS

This uses the global object customElements:

customElements.define('progress-indicator', ProgressIndicator)

So the only thing to do is import this file, or link to it in HTML, then you can use the tag in your HTML.

copy

First copy the file to a location accessible to your server:

cp ./node_modules/@substrate-system/progress-indicator/dist/index.js ./public/progress-indicator.js

Then add it to HTML:

  <script type="module" src="./progress-indicator.js"></script>

And now you can use the tag in your markup:

<div id="root">
  <progress-indicator progress="0" stroke="8" viewbox="130">
    <div role="alert" aria-live="polite">
      <p>Loading, please wait…</p>
    </div>
  </progress-indicator>
</div>

<script type="module" src="./progress-indicator.js"></script>

import

If you are using a tool such as vite, you can just import, then use in your HTML.

import '@substrate-system/progress-indicator'
import '@substrate-system/progress-indicator/css'

CSS

Include the CSS also.

copy

cp ./node_modules/@substrate-system/progress-indicator/dist/index.css ./public/progress-indicator.css

link in HTML

<link rel="stylesheet" crossorigin href="./progress-indicator.css">

vite

If you are using a tool such as vite, add a link to the css from within your javascript.

import '@substrate-system/progress-indicator/index.css'