https://github.com/substrate-system/progress-indicator
Web component progress indicator
https://github.com/substrate-system/progress-indicator
Last synced: 5 months ago
JSON representation
Web component progress indicator
- Host: GitHub
- URL: https://github.com/substrate-system/progress-indicator
- Owner: substrate-system
- License: other
- Created: 2024-05-01T03:52:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-08T00:28:42.000Z (12 months ago)
- Last Synced: 2025-07-12T01:07:10.147Z (11 months ago)
- Language: TypeScript
- Homepage: https://substrate-system.github.io/progress-indicator/
- Size: 151 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# progress indicator
[](https://github.com/substrate-system/progress-indicator/actions/workflows/nodejs.yml)
[](README.md)
[](README.md)
[](https://semver.org/)
[](https://packagephobia.com/result?p=@substrate-system/progress-indicator)
[](https://bundlephobia.com/package/@substrate-system/progress-indicator)
[](LICENSE)
See [an article on piccalil.li/blog](https://piccalil.li/blog/solution-009-progress-indicator)
Contents
- [Install](#install)
- [Example](#example)
- [Use](#use)
* [render server-side](#render-server-side)
* [No build tools](#no-build-tools)
* [Bundle](#bundle)
* [CSS](#css)
* [No build tools](#no-build-tools-1)
* [link in HTML](#link-in-html)
* [Bundler](#bundler)
- [develop](#develop)
* [SSR](#ssr)
## Install
```sh
npm i -S @substrate-system/progress-indicator
```
## Example
See [./example/index.html](./example/index.html).
See [the demonstration](https://substrate-system.github.io/progress-indicator/).
This takes an attribute `progress`, which is a percent number from 0 - 100.
```js
import { ProgressIndicator } from '@substrate-system/progress-indicator'
import '@substrate-system/progress-indicator/css'
ProgressIndicator.define()
```
```html
Loading, please wait…
```
## Use
You've got options.
### render server-side
This is factored as a ["split component"](https://www.spicyweb.dev/web-components-ssr-node/),
which means it is easy to render server-side.
Import from the path `/ssr`. See [./example](./example/ssr/).
#### server
Import and build:
```js
import { outerHTML } from '@substrate-system/progress-indicator/ssr'
// outerHTML takes the standard attributes
const myString = `
${outerHTML({ progress: 25 })}
`
```
#### Client-side
If you pre-render the component server-side, then you can include a "light"
version of the client-side JS, which just attaches event listeners and responds
to attribute changes. It doesn't know how to render itself.
```js
import { define } from '@substrate-system/progress-indicator/client'
define()
```
### No build tools
It is possible to use this without building any JS. The package exposes a
universal module, designed to be consumed directly.
After installing, copy the `/umd.min.js` path to your web server.
It will define the component in the page registry, and any tags in the page
will be hydrated.
#### copy
First copy the file to your server:
```sh
cp ./node_modules/@substrate-system/progress-indicator/dist/umd.min.js ./public/progress-indicator.js
```
```html
```
#### HTML
And now you can use the tag in your markup:
```html
Loading, please wait…
```
### Bundle
If you are using a tool such as `vite`, just import, then use in
your HTML.
#### Include the full version
```js
import { ProgressIndicator } from '@substrate-system/progress-indicator'
import '@substrate-system/progress-indicator/css'
ProgressIndicator.define()
```
#### Include the light version
If you have already rendered server-side.
```js
import { define } from '@substrate-system/progress-indicator/client'
import '@substrate-system/progress-indicator/css'
```
### CSS
Include the CSS also.
### No build tools
You can simply copy the CSS file to your server.
```sh
cp ./node_modules/@substrate-system/progress-indicator/dist/index.css ./public/progress-indicator.css
```
or the minified CSS:
```sh
cp ./node_modules/@substrate-system/progress-indicator/dist/index.min.css ./public/progress-indicator.css
```
### link in HTML
```html
```
### Bundler
If you are using a tool such as vite, add a link to the css from within
your javascript, at the `/css` path.
```js
import '@substrate-system/progress-indicator/css'
```
## develop
Start a localhost server of the `./example` directory.
```sh
npm start
```
### SSR
Use the `/ssr` path to render a static HTML file, and link to the "light"
version of the client-side JS in HTML, then serve:
```sh
npm run example
```