{"id":18751150,"url":"https://github.com/substrate-system/progress-indicator","last_synced_at":"2026-01-12T02:28:30.716Z","repository":{"id":237370390,"uuid":"794394091","full_name":"substrate-system/progress-indicator","owner":"substrate-system","description":"Web component progress indicator","archived":false,"fork":false,"pushed_at":"2025-07-08T00:28:42.000Z","size":155,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-12T01:07:10.147Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://substrate-system.github.io/progress-indicator/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-01T03:52:39.000Z","updated_at":"2025-07-08T00:28:38.000Z","dependencies_parsed_at":"2024-05-07T18:26:34.121Z","dependency_job_id":"df88bddd-5dd5-4641-befe-3b4d80484750","html_url":"https://github.com/substrate-system/progress-indicator","commit_stats":null,"previous_names":["bicycle-codes/progress-indicator","substrate-system/progress-indicator"],"tags_count":17,"template":false,"template_full_name":"nichoth/template-ts-browser","purl":"pkg:github/substrate-system/progress-indicator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fprogress-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fprogress-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fprogress-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fprogress-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/progress-indicator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fprogress-indicator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265860019,"owners_count":23840089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T17:14:40.902Z","updated_at":"2026-01-12T02:28:30.705Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# progress indicator\n[![tests](https://img.shields.io/github/actions/workflow/status/substrate-system/progress-indicator/nodejs.yml?style=flat-square)](https://github.com/substrate-system/progress-indicator/actions/workflows/nodejs.yml)\n[![types](https://img.shields.io/npm/types/@substrate-system/progress-indicator?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![install size](https://flat.badgen.net/packagephobia/install/@substrate-system/progress-indicator?cache-control=no-cache)](https://packagephobia.com/result?p=@substrate-system/progress-indicator)\n[![gzip size](https://img.shields.io/bundlephobia/minzip/@substrate-system/progress-indicator?style=flat-square)](https://bundlephobia.com/package/@substrate-system/progress-indicator)\n[![license](https://img.shields.io/badge/license-Big_Time-blue?style=flat-square)](LICENSE)\n\n\nSee [an article on piccalil.li/blog](https://piccalil.li/blog/solution-009-progress-indicator)\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Example](#example)\n- [Use](#use)\n  * [render server-side](#render-server-side)\n  * [No build tools](#no-build-tools)\n  * [Bundle](#bundle)\n  * [CSS](#css)\n  * [No build tools](#no-build-tools-1)\n  * [link in HTML](#link-in-html)\n  * [Bundler](#bundler)\n- [develop](#develop)\n  * [SSR](#ssr)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Install\n\n```sh\nnpm i -S @substrate-system/progress-indicator\n```\n\n## Example\nSee [./example/index.html](./example/index.html).\n\nSee [the demonstration](https://substrate-system.github.io/progress-indicator/).\n\n![screenshot](image.png)\n\n![screenshot 100%](image-1.png)\n\nThis takes an attribute `progress`, which is a percent number from 0 - 100.\n\n```js\nimport { ProgressIndicator } from '@substrate-system/progress-indicator'\nimport '@substrate-system/progress-indicator/css'\n\nProgressIndicator.define()\n```\n\n```html\n\u003cprogress-indicator progress=\"10\"\u003e\n  \u003cdiv role=\"alert\" aria-live=\"polite\"\u003e\n    \u003c!-- show this text iff the web component cannot render --\u003e\n    \u003cp\u003eLoading, please wait…\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/progress-indicator\u003e\n```\n\n## Use\n\nYou've got options.\n\n### render server-side\n\nThis is factored as a [\"split component\"](https://www.spicyweb.dev/web-components-ssr-node/),\nwhich means it is easy to render server-side.\n\nImport from the path `/ssr`. See [./example](./example/ssr/).\n\n#### server\n\nImport and build:\n\n```js\nimport { outerHTML } from '@substrate-system/progress-indicator/ssr'\n\n// outerHTML takes the standard attributes\n\nconst myString = `\n  \u003cdiv id=root\u003e\n    ${outerHTML({ progress: 25 })}\n  \u003c/div\u003e\n`\n```\n\n#### Client-side\n\nIf you pre-render the component server-side, then you can include a \"light\"\nversion of the client-side JS, which just attaches event listeners and responds\nto attribute changes. It doesn't know how to render itself.\n\n```js\nimport { define } from '@substrate-system/progress-indicator/client'\n\ndefine()\n```\n\n### No build tools\n\nIt is possible to use this without building any JS. The package exposes a\nuniversal module, designed to be consumed directly.\n\nAfter installing, copy the `/umd.min.js` path to your web server.\nIt will define the component in the page registry, and any tags in the page\nwill be hydrated.\n\n#### copy\nFirst copy the file to your server:\n\n```sh\ncp ./node_modules/@substrate-system/progress-indicator/dist/umd.min.js ./public/progress-indicator.js\n```\n\n```html\n\u003cscript src=\"/progress-indicator.js\"\u003e\u003c/script\u003e\n```\n\n#### HTML\n\nAnd now you can use the tag in your markup:\n\n```html\n\u003cdiv id=\"root\"\u003e\n  \u003cprogress-indicator progress=\"0\" stroke=\"8\" viewbox=\"130\"\u003e\n    \u003c!-- show  this text if we can't render web components --\u003e\n    \u003cdiv role=\"alert\" aria-live=\"polite\"\u003e\n      \u003cp\u003eLoading, please wait…\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/progress-indicator\u003e\n\u003c/div\u003e\n```\n\n### Bundle\nIf you are using a tool such as `vite`, just import, then use in\nyour HTML.\n\n#### Include the full version\n\n```js\nimport { ProgressIndicator } from '@substrate-system/progress-indicator'\nimport '@substrate-system/progress-indicator/css'\n\nProgressIndicator.define()\n```\n\n#### Include the light version\n\nIf you have already rendered server-side.\n\n```js\nimport { define } from '@substrate-system/progress-indicator/client'\nimport '@substrate-system/progress-indicator/css'\n```\n\n### CSS\n\nInclude the CSS also.\n\n### No build tools\n\nYou can simply copy the CSS file to your server.\n\n```sh\ncp ./node_modules/@substrate-system/progress-indicator/dist/index.css ./public/progress-indicator.css\n```\n\nor the minified CSS:\n\n```sh\ncp ./node_modules/@substrate-system/progress-indicator/dist/index.min.css ./public/progress-indicator.css\n```\n\n### link in HTML\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./progress-indicator.css\"\u003e\n```\n\n### Bundler\n\nIf you are using a tool such as vite, add a link to the css from within\nyour javascript, at the `/css` path.\n\n```js\nimport '@substrate-system/progress-indicator/css'\n```\n\n## develop\n\nStart a localhost server of the `./example` directory.\n\n```sh\nnpm start\n```\n\n### SSR\n\nUse the `/ssr` path to render a static HTML file, and link to the \"light\"\nversion of the client-side JS in HTML, then serve:\n\n```sh\nnpm run example\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fprogress-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fprogress-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fprogress-indicator/lists"}