{"id":18318412,"url":"https://github.com/tether/progress-bar","last_synced_at":"2025-04-09T13:53:58.901Z","repository":{"id":10756382,"uuid":"13017666","full_name":"tether/progress-bar","owner":"tether","description":"A slick progress bar to show status and movement through a set of defined steps.","archived":false,"fork":false,"pushed_at":"2014-01-27T22:30:13.000Z","size":140,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-15T07:50:01.967Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tether.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-22T17:33:00.000Z","updated_at":"2017-06-23T21:44:06.000Z","dependencies_parsed_at":"2022-08-29T23:02:40.225Z","dependency_job_id":null,"html_url":"https://github.com/tether/progress-bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fprogress-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fprogress-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fprogress-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tether%2Fprogress-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tether","download_url":"https://codeload.github.com/tether/progress-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054218,"owners_count":21039951,"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-05T18:09:31.230Z","updated_at":"2025-04-09T13:53:58.883Z","avatar_url":"https://github.com/tether.png","language":"CSS","readme":"# Progress Bar\n\nA simple piece of UI to show progress through a set of steps in a checkout, creation of something, etc.\n\n![alt tag](http://f.cl.ly/items/0s1l1p2O2N2o0g291v0U/Screen%20Shot%202013-09-22%20at%2011.53.28%20AM.png)\n![alt tag](http://f.cl.ly/items/1n390s213i0q1d1p0h0w/Screen%20Shot%202013-09-22%20at%2011.54.12%20AM.png)\n\n## Installation\n\n  Install with [component(1)](http://component.io):\n\n    $ component install petrofeed/progress-bar\n\n## Getting Started\n\nTo use Progress Bar, add the markup for the progress bar to your template.\n\n    \u003cdiv id=\"my-progress-bar\" class=\"progress-bar\" aria-active-classes=\"active\" aria-error-classes=\"error\"\u003e\n        \u003cul class=\"steps\"\u003e\n          \u003cli data-name=\"pending\" class=\"active\"\u003ePending\u003c/li\u003e\n          \u003cli data-name=\"processing\"\u003eProcessing\u003c/li\u003e\n          \u003cli data-name=\"finished\"\u003eFinished\u003c/li\u003e\n          \u003cli data-name=\"errored\" aria-error-step=\"true\" class=\"progress-error active\"\u003eError\u003c/li\u003e\n        \u003c/ul\u003e\n\n        \u003cdiv class=\"bar-wrapper\"\u003e\n          \u003cdiv class=\"bar\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\nThen create a new progress bar by passing in the string selector of the progress bar.\n\n    var progressBar = new ProgressBar('#my-progress-bar');\n    \nTo change the active step of the progress bar, just call:\n    \n    progressBar.changeActiveStep('processing');\n    \nThe progress bar step names are defined in the `data-name` attributes on the list items in the `.steps` unordered list.\n\n## Styling\n\nProgress bar comes with some ready to use default styling, but you can change the styling to fit your needs. \n\nOne easy way to do this is to add the classes you want applied to the \"active\" step and the \"error\" step, by adding them to the `aria-active-classes` and `aria-error-classes` attributes on the progress bar.\n\n## Events\n\nTwo events are fired from the progress bar via jQuery:\n\n`finished`: Triggered when the last step is set to active.\n\n`error`: Triggered when the progress bar's error step is made active.\n\n---\n\nProudly brought to you by [PetroFeed](http://PetroFeed.com).\n\n\n![Pedro](https://www.petrofeed.com/img/company/pedro.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftether%2Fprogress-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftether%2Fprogress-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftether%2Fprogress-bar/lists"}