{"id":13507407,"url":"https://geersch.github.io/bootstrap-progressbar/","last_synced_at":"2025-03-30T08:30:31.092Z","repository":{"id":5404587,"uuid":"6594627","full_name":"geersch/bootstrap-progressbar","owner":"geersch","description":"Multi-Color progressbar component for Twitter Bootstrap","archived":true,"fork":false,"pushed_at":"2022-01-26T10:35:03.000Z","size":169,"stargazers_count":75,"open_issues_count":0,"forks_count":21,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-24T12:12:59.436Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://geersch.github.io/bootstrap-progressbar/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geersch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-08T10:19:45.000Z","updated_at":"2024-07-03T15:40:17.000Z","dependencies_parsed_at":"2022-07-07T19:00:56.122Z","dependency_job_id":null,"html_url":"https://github.com/geersch/bootstrap-progressbar","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/geersch%2Fbootstrap-progressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geersch%2Fbootstrap-progressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geersch%2Fbootstrap-progressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geersch%2Fbootstrap-progressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geersch","download_url":"https://codeload.github.com/geersch/bootstrap-progressbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246296352,"owners_count":20754625,"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-08-01T02:00:33.092Z","updated_at":"2025-03-30T08:30:30.674Z","avatar_url":"https://github.com/geersch.png","language":null,"funding_links":[],"categories":["add-ons"],"sub_categories":["progress bar"],"readme":"# Multi-Color Progressbar for Twitter Bootstrap\n\nMulti-Color progressbar component for Twitter Bootstrap creates a progressbar which consists out of three colors or zones.\n\n- Green (bar-success)\n- Orange (bar-warning)\n- Red (bar-danger)\n\nThe progressbar consists out of three zones: safe, warning and danger. The safe zone is displayed in green, the warning\nzone in orange and red is used for the danger zone.\n\nBy default the following percentages are used for the zones:\n\n- Green (0 - 50%)\n- Warning (50 - 90%)\n- Danger (90 - 100%)\n\nThe progressbar automatically changes the color depending on its position.\n\n## Demo\n\n[Click here for a live demo](http://geersch.github.io/bootstrap-progressbar/demo.html).\n\n## Usage\n\nThis component relies on [Twitter Bootstrap](http://twitter.github.io/bootstrap/) and [jQuery](http://jquery.com/).\n\nBasic usage:\n\n```\n\u003cscript type=\"text/javascript\" src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bootstrap.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"bootstrap.css\" /\u003e\n\n\u003cdiv id=\"progressbar\"\u003e\n\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n$('#progressbar').progressbar();\n\u003c/script\u003e\n```\n\nYou can use the following additional options to modify the behaviour of the progressbar:\n\n- **warningMarker**: Percentage at which the warning zone starts (default 50%).\n- **dangerMarker**: Percentage at which the danger zone starts (default 90%).\n- **maximum**: Maximum value which equals 100%.\n- **step**: The amount that each completed task in an operation changes the value of the progress bar.\n\nFor example:\n\n```\n\u003cscript type=\"text/javascript\" src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bootstrap.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"bootstrap.css\" /\u003e\n\n\u003cdiv id=\"progressbar\"\u003e\n\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n$('#progressbar').progressbar({\n    warningMarker: 60,\n    dangerMarker: 80,\n    maximum: 100,\n    step: 5\n});\n\u003c/script\u003e\n```\n\n## Methods\n\n**stepIt**\n\nIncreases the position of the progressbar with the value of its step property.\n\n```\n$('#progressbar').progressbar('stepIt');\n```\n\n**setWarningMarker**\n\nSet the position, expressed in percentage, of the warning marker.\n\n```\n$('#progressbar').progressbar('setWarningMarker', 50);\n```\n\n**setDangerMarker**\n\nSet the position, expressed in percentage, of the danger marker.\n\n```\n$('#progressbar').progressbar('setDangerMarker', 90);\n```\n\n**setStep**\n\nSet the step, by which the position of the progressbar is increased each time the stepIt() method is called.\n\n```\n$('#progressbar').progressbar('setStep', 10);\n```\n\n**setMaximum**\n\nSet the maximum allowed value of the progressbar.\n\n```\n$('#progressbar').progressbar('setMaximum', 85);\n```\n\n**setPosition**\n\nSet the current position of the progressbar. Must be less or equal to the maximum.\n\n```\n$('#progressbar').progressbar('setPosition', 85);\n```\n\n**reset**\n\nResets the progressbar back to position 0.\n\n```\n$('#progressbar').progressbar('reset');\n```\n\n## Events\n\nThe progressbar supports one event, namely **positionChanged**. This event is triggered when its position changes.\n\nThe event object has two additional properties:\n\n- **position**: Current position of the progressbar.\n- **percent**: Current position of the progressbar expressed in percentage.\n\n```\n$('#progressbar').on(\"positionChanged\", function (e) {\n    console.log(e.position);\n    console.log(e.percent);\n});\n```\n\n## License\n\nThis code is made available under the [Apache License v2.0](http://www.apache.org/licenses/LICENSE-2.0),\nthe same as Twitter Bootstrap.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/geersch.github.io%2Fbootstrap-progressbar%2F","html_url":"https://awesome.ecosyste.ms/projects/geersch.github.io%2Fbootstrap-progressbar%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/geersch.github.io%2Fbootstrap-progressbar%2F/lists"}