{"id":20388164,"url":"https://github.com/torrobinson/progress-steps-webcomponent","last_synced_at":"2026-06-14T14:01:34.347Z","repository":{"id":57331050,"uuid":"371775476","full_name":"torrobinson/progress-steps-webcomponent","owner":"torrobinson","description":"🧙 A native web component for displaying the steps of a process and letting users move between them","archived":false,"fork":false,"pushed_at":"2022-11-07T23:46:20.000Z","size":30,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-20T04:49:44.122Z","etag":null,"topics":["progress","progress-bar","step","stepper","steps","webcomponent","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/progress-steps-webcomponent","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torrobinson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-28T17:35:22.000Z","updated_at":"2024-01-19T19:23:49.000Z","dependencies_parsed_at":"2023-01-22T17:00:58.263Z","dependency_job_id":null,"html_url":"https://github.com/torrobinson/progress-steps-webcomponent","commit_stats":null,"previous_names":["torrobinson/progress-steps"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/torrobinson/progress-steps-webcomponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fprogress-steps-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fprogress-steps-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fprogress-steps-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fprogress-steps-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torrobinson","download_url":"https://codeload.github.com/torrobinson/progress-steps-webcomponent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fprogress-steps-webcomponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34323994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["progress","progress-bar","step","stepper","steps","webcomponent","wizard","wizard-steps"],"created_at":"2024-11-15T03:07:40.305Z","updated_at":"2026-06-14T14:01:34.321Z","avatar_url":"https://github.com/torrobinson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# progress-steps-webcomponent\n\nA web component for displaying the steps of a process and letting users move between them\n\n\u003cimg src=\"/docs/sample.png\"\u003e\n\t\n## 👉[View Example](https://torrobinson.github.io/progress-steps-webcomponent/docs/)👈\n\n## Getting Started\n\n### CDN\n\nUse the built files from npm from https://unpkg.com/progress-steps-webcomponent@latest\n\n```html\n\u003c!-- For example, use a CDN and replace 'latest' with your intended version --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/progress-steps-webcomponent@latest/dist/progress-steps.min.css\"/\u003e\n\u003cscript src=\"https://unpkg.com/progress-steps-webcomponent@latest/dist/progress-steps.min.js\"\u003e\u003c/script\u003e\n```\n\n### Manual\n\nTo build yourself, clone the repo, and run\n\n```node\nnpm i\nnpm run build\n```\n\nAnd use the `dist/progress-steps.min.js` and `dist/progress-steps.min.css` files\n\n## Configuration\n\nView the example above for a complete working example.\nAdd the component anywhere in your html:\n\n```html\n\u003cprogress-steps id=\"my-steps\"\u003e\u003c/progress-steps\u003e\n```\n\nThen initialize the control\n\n```js\n// Find the control\nlet myStepper = document.querySelector('#my-steps');\n\n// And initialize it\nmyStepper.init({\n\tsteps: [{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }],\n});\n```\n\n### Step configuration\n\nYou can disable steps by setting `disabled` to `true`.\nYou can attach any custom property to a step that you wish. When programmatically fetching the step later, those values can be retrieved and used. For example, you might attach custom IDs/GUIDs to them, so that when a step is changed, you can act upon the ID of that step:\n\n```js\nmyStepper.init({\n\tsteps: [\n\t\t{ name: 'Step 1', myCustomId: 1 },\n\t\t{ name: 'Step 2', myCustomId: 2 },\n\t\t{ name: 'Step 3', myCustomId: 3 },\n\t\t{ name: 'Step 4', myCustomId: 4 },\n\t\t{ name: 'Step 5', myCustomId: 5, disabled: true },\n\t\t{ name: 'Step 6', myCustomId: 6, disabled: true },\n\t],\n\tevents: {\n\t\tonStepChanged: function (stepNumber, stepObj) {\n\t\t\tconsole.log(`Step changed to ${stepNumber}!`);\n\t\t\tlet newId = stepObj.myCustomId;\n\t\t\t// [Act upon newId here]\n\t\t},\n\t},\n});\n```\n\n### Events\n\n| Event Name    | Parameters            | Description                    |\n| ------------- | --------------------- | ------------------------------ |\n| onStepChanged | (stepNumber, stepObj) | Fired when the step is changed |\n\n### Methods\n\n| Method Name | Parameters | Description                                                     |\n| ----------- | ---------- | --------------------------------------------------------------- |\n| init        | (options)  | Initializes the control. See above examples for `options` usage |\n| getStep     |            | Returns the step object of the current active step              |\n| setStep     | (step)     | Takes in the step number of the step to change to               |\n| stepUp      |            | Increments the current active step                              |\n| stepDown    |            | Decrements the current active step                              |\n| disableStep | (step)     | Takes in the step number of a step and disables it from use     |\n| enableStep  | (step)     | Takes in the step number of a step and enables it for use       |\n\n### Styling\n\nStyling defaults can be overridden by overriding CSS variables on your component instance:\n\n```css\n/* Ugly but complete style override demonstrating all the style components */\n#my-steps{\n\t/* The color to fill up, left-to-right, as steps are set to active */\n\t--progress-fill-color: #cf78d9;\n\t/* The default color of the unfilled section of line and steps after the active step */\n\t--progress-unfilled-color: purple;\n\n\t/* The width of each step icon */\n\t--step-width: 20px;\n\t/* The font size of the step number and label */\n\t--font-size: 12px;\n\t/* The border radius of the step icon */\n\t--step-border-radius: 25%;\n\t/* The thickness of the line/progress bar/borders */\n\t--line-thickness: 3px;\n\n\t/* The animation speed of the progress bar filling up */\n\t--animation-speed: 500ms;\n\t/* Display attribute of the step labels. Show: 'inline-block', hide: 'none' */\n\t--step-label-display: 'inline-block';\n\t/* The vertical margin of the labels, if shown */\n\t--step-label-spacing: 5px;\n\t/* The font weight to use on step labels */\n\t--step-label-font-weight: normal;\n\n\t/* The font color of the step icon that is currently active */\n\t--current-step-font-color: red;\n\t/* The font color of the current step label */\n\t--current-label-font-color: blue;\n\t/* The font weight of the current step label */\n\t--current-label-font-weight: bold;\n\n\t/* The font color of step labels that are before the current step */\n\t--previous-label-font-color: red;\n\t/* The font color of the step icons that are before the current step */\n\t--previous-step-font-color: pink;\n\n\t/* The fill-color for step icons that are after the current active step */\n\t--future-step-fill-color: orange;\n\t/* The font color of step labels that are after the current step */\n\t--future-label-font-color: green;\n\n\t/* The font color of step labels that are disabled */\n\t--disabled-label-font-color: maroon;\n\t/* The font color of the disabled steps */\n\t--disabled-step-font-color: red;\n\t/* The fill-color for disabled step icons */\n\t--disabled-step-fill-color: blue;\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorrobinson%2Fprogress-steps-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorrobinson%2Fprogress-steps-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorrobinson%2Fprogress-steps-webcomponent/lists"}