{"id":13723328,"url":"https://github.com/okrad/svelte-progressbar","last_synced_at":"2025-04-07T17:09:00.841Z","repository":{"id":34896217,"uuid":"187363585","full_name":"okrad/svelte-progressbar","owner":"okrad","description":"A multiseries, SVG progressbar component made with Svelte","archived":false,"fork":false,"pushed_at":"2023-07-06T09:04:49.000Z","size":569,"stargazers_count":129,"open_issues_count":9,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T14:34:50.194Z","etag":null,"topics":["javascript","progress-bar","progressbar","progressbar-js","progressbars","svelte","svelte-components","svelte-v3","sveltejs","svg"],"latest_commit_sha":null,"homepage":"https://okrad.github.io/svelte-progressbar/","language":"Svelte","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/okrad.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-05-18T13:50:48.000Z","updated_at":"2024-09-27T18:21:09.000Z","dependencies_parsed_at":"2024-01-06T01:17:50.099Z","dependency_job_id":"5fd8fa88-4efb-4a9a-ae14-a7d099a53578","html_url":"https://github.com/okrad/svelte-progressbar","commit_stats":{"total_commits":126,"total_committers":3,"mean_commits":42.0,"dds":"0.015873015873015928","last_synced_commit":"ba860e941317471674abb18466f7b21f2245e1d3"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okrad%2Fsvelte-progressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okrad%2Fsvelte-progressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okrad%2Fsvelte-progressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okrad%2Fsvelte-progressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/okrad","download_url":"https://codeload.github.com/okrad/svelte-progressbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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":["javascript","progress-bar","progressbar","progressbar-js","progressbars","svelte","svelte-components","svelte-v3","sveltejs","svg"],"created_at":"2024-08-03T01:01:39.337Z","updated_at":"2025-04-07T17:09:00.798Z","avatar_url":"https://github.com/okrad.png","language":"Svelte","readme":"# svelte-progressbar\nA multi-series  SVG progress bar component made with Svelte 3.\nIt can be rendered as a **linear**, **radial** (circular), **semicircular** or even **custom-shaped** progressbar. Progression bars and values are fully animated.\n\nIf rendered as a linear progressbar there are 2 styles supported:\n* Standard: uses svg masks to display inverted text color for the value.\n* Thin: the progression bars are rendered as thin bars and the values are placed externally\n\nNo dependencies, only 35kb when minified (11kb gzipped)!\n\n# Upgrade notice\nThe current release is a substantial rewrite of much of the library, and as such it's not guaranteed to be compatible!\n\nThe following are the main differences with the previous release:\n\n* If no width is specified, the progress bar will take the whole parent width\n* The \"path\" parameter has been removed and replaced by the \"pathFn\" parameter. See the API paragraph for usage info.\n\n# Usage\n\n```\nnpm i @okrad/svelte-progressbar\n```\n\nThen you can use it like:\n\n```javascript\n//main.js\nimport App from './App.svelte';\n\nconst app = new App({\n        target: document.body,\n        props: {\n                series: [20, 42]\n        }\n});\n\nexport default app;\n```\n\n```javascript\n//App.svelte\n\u003cscript\u003e\n  import ProgressBar from \"@okrad/svelte-progressbar\";\n  export let series = [];\n\u003c/script\u003e\n\n\u003cProgressBar {series} /\u003e\n\n\u003cbutton on:click={() =\u003e series = [50, 50]}\u003efill\u003c/button\u003e\n\u003cbutton on:click={() =\u003e series = [0, 0]}\u003eclear\u003c/button\u003e\n```\n\n## Building from source\n\n```\nnpm run package\n```\n\nBuilds svelte files and transpiles ts into dist/ directory\n\nOr...\n\n```\nnpm run bundle\n```\n\nCreates minified index.js and index.mjs files in the bundle/ directory.\n\nYou can use the index.js bundle by including it in your html file, then instantiating the component:\n```javascript\nconst pb = new ProgressBar({\n        target: document.getElementById('demo'),\n        props: {\n                series: 20\n        }\n});\n```\nThis creates a standard progressbar with 20% progression.\n\n```javascript\nconst pb = new ProgressBar({\n        target: document.getElementById('demo'),\n        style: 'radial',\n        props: {\n                series: [20, 10]\n        }\n});\n```\nThis creates a radial progressbar with 2 series (20% + 10%).\n\n# API\n**ProgressBar(options)**: The constructor. Available props are:\n* series (number | object | array): for single series progressbars, it can be a number indicating the progression percentage (0-100), or a json object with \"perc\" and \"color\" properties. This property is reactive. For example:\n```\nseries: 42\n```\n```\nseries: [10, 32]\n```\n```\nseries: [\n        {\n                perc: 10,\n                color: '#5AB6DF'\n        },\n        {\n                perc: 32,\n                color: '#65CEA7'\n        }\n]\n```\n\n\n* valueLabel: the label that must be shown as the progress value. It can be a simple text or a markup fragment. The label can contain \"markers\" in the  form \"%1\", \"%2\"... that will be substituted with the value of the corresponding series (for example: \"perc 1: %1, perc 2: %2\"). If not specified, the progress percentage will be shown.\n* style: can be \"standard\" (default), \"thin\", \"radial\", \"semicircle\" o \"custom\"\n* width: determines the width of the whole component. If not specified (or set to \"auto\" or \"100%\"), the component will occupy the full width of its parent.\n* height: determines the height of the component. If not specified, it defaults to 14px for standard progressbars, 1px for thin progressbars.\n* thickness: used only for radial progress bars. It determines the thickness of the bar as a unitless number between 0 and 50 (corresponding to the ray of the circle).\n* textSize: the size of the font (in percentage) for the progression value (default: 30 for thin progressbars, 70 for default progressbar, 150 for radial)\n* addBackground: determines if a further bar should be added as background to the value bar. Default true.\n* bgColor: if addBackground is true, specifies the color of the background bar\n* bgFillColor: available only for \"radial\" and \"semicircle\" bars. If addBackground is true, specifies the color of the \"inner circle\" of the progress bar.\n* labelColor: specifies the color of the label.\n* invLabelColor: specifies the \"inverted\" label color.\n* stackSeries: currently available for \"radial\" and \"semicircle\" styles only. If true (default), series will be stacked one after the other. If false, series will be rendered as independent, concentrical arcs.\n* margin: currently used only for radial non-stacked bar. Determines the space between the series bars.\n* thresholds: list (array) of objects that define which color apply to the progress in relation with the variation of the series value.\n* cls: css class to apply to the main element.\n* rx, ry: horizontal and vertical border radius (for linear progress bars). If ry is not specified, it defaults to rx.\n* fillDirection: direction of \"filling\". Can be one of \"l2r\" (left to right [default]), \"r2l\" (right to left), \"t2b\" (top to bottom) o \"b2t\" (bottom to top).\n* labelAlignX: alignment of the label along the \"x\" axis. Can be one of \"center\" (default), \"left\", \"right\", \"leftOf\", \"rightOf\".\n* labelAlignY: alignment of the label along the \"y\" axis. Can be one of \"middle\" (default), \"top\", \"bottom\", \"above\", \"below\".\n* pathFn: used only for custom progress bars. It defines a function that must return the svg path that corresponds to the shape of the progress bar. The function receives 2 parameters: the width and the height of the viewbox, to allow scaling the path values to the actual viewbox.\n\n**updateSeries(series)**: update all of the series. Since the \"series\" property is reactive, if you are using the component in a Svelte app, you can simply bind to it and change its value as needed.\n\n**updatePerc(perc, seriesId = 0)**: update the specified series progress percentage. Again, since the \"series\" property is reactive, if you are using the component in a Svelte app, you can simply bind to it and change its value as needed.\n\n### Component composition ###\n\nWithin a svelte app, you can add a subcomponent to a radial progress bar:\n\n```\n\u003cProgressBar style='radial' series={[80]}\u003e\n  \u003cMySubcomponent ... /\u003e\n\u003c/ProgressBar\u003e\n```\n\nOr you can for example add an HTML fragment by using a foreignObject tag. In this case just make sure to explicitly set the namespace with the xmlns attribute:\n\n```\n\u003cProgressBar style='radial' series={[80]}\u003e\n  \u003cforeignObject x=\"0\" y=\"0\" width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n    \u003cbutton on:click={...}\u003eCLICKME\u003c/button\u003e\n  \u003c/foreignObject\u003e\n\u003c/ProgressBar\u003e\n```\n\n# Examples\n```\n//Linear progress with single series with vanilla js\nnew ProgressBar({\n  target: document.getElementById('pb_container'),\n  props: {\n    series: [90]\n  }\n});\n\n//Linear progress as a Svelte component\n\u003cProgressBar series={[90]}/\u003e\n\n//Linear progress with two series with vanilla js\nnew ProgressBar({\n  target: document.getElementById('pb_container'),\n  props: {\n    series: [40, 25]\n  }\n});\n\n//Linear progress with two series as a Svelte component\n\u003cProgressBar series={[40, 25]}/\u003e\n\n//Linear progress with \"thin\" style and two series\nnew ProgressBar({\n  target: document.getElementById('demo3'),\n  props: {\n    style: 'thin',\n    series: [30, 15]\n  }\n});\n\n//Custom progress bar\n\u003cProgressBar\n  style='custom'\n  series={[70]}\n  path=\"m 99.999994,28.641477 c 0,26.036253 -23.181375,32.218477 -49.999995,47.14281 C 25.522677,62.948324 0,54.67773 0,28.641477 10e-8,2.6052245 24.031722,-6.9568368 50.598798,6.1131375 78.0152,-7.6240828 99.999994,2.6052245 99.999994,28.641477 Z\"/\u003e\n\n//Semicircular progress bar\nnew ProgressBar({\n  target: document.getElementById('demo3'),\n  props: {\n    style: 'semicircle',\n    series: [30]\n  }\n});\n\n//Or...\n\u003cProgressBar style='semicircle' series={[30]}/\u003e\n\n//Radial progress bar with single series and thresholds\nnew ProgressBar({\n  target: document.getElementById('pb_container'),\n  props: {\n    style: 'radial',\n    series: [80],\n    thickness: 10,\n    thresholds: [\n      {\n        till: 50,       //Color stays red from 0% to 50%\n        color: '#800000'\n      },\n      {\n        till: 100,      //Color goes green from 51% to 100%\n        color: '#008000'\n      }\n    ]\n}\n});\n\n//Or...\n\u003cProgressBar\n  style='radial'\n  series={[80]}\n  thickness={10}\n  thresholds={[\n      {\n        till: 50,       //Color stays red from 0% to 50%\n        color: '#800000'\n      },\n      {\n        till: 100,      //Color goes green from 51% to 100%\n        color: '#008000'\n      }\n    ]}/\u003e\n```\nTake a look at these [working examples](https://okrad.github.io/svelte-progressbar)!\n\n\n# Changelog\n2023/07/06: Version 2.2.0\n* Migration to Svelte 4\n\n2023/05/16: Version 2.1.1\n* Small fixes\n\n2023/02/21: Version 2.1.0\n* Sveltekit conversion\n\n2023/02/21: Version 2.0.0\n* Major refactorization, bringing full width support and many other improvements!\n* Moved to vite\n\n2021/02/23: Version 1.11.2.\n* Fixed exception on component destruct\n\n2021/01/29: Version 1.11.1.\n* Fixed issue for inverted label not being visible on Chrome 88\n* Fixed a small regression\n\n2021/01/22: Version 1.11.0.\n* Introducing CustomShapeProgressBar!\n* LinearProgressBar has been refectored to use CustomShapeProgressBar\n* Added custom label template\n* x \u0026 y label positions can be controlled through the labelAlignX and labelAlignY props\n* inverted label color can be changed with the invLabelColor prop\n* Fill direction can be controlled with the \"fillDirection\" prop\n\n2021/01/15: Version 1.10.0.\n* \"color\" property is now reactive (and interpolates)\n* \"updateSeries\" function added\n* Small fix: Avoid style leaking in the global scope\n\n2020/11/23: Version 1.9.4.\n* Small fixes\n\n2020/11/05: Version 1.9.3.\n* Typescript fixes\n\n2020/11/02: Version 1.9.2. Removed \"legacy\" build\n\n2020/10/27: Version 1.9.1. Improved TypeScript support.\n\n2020/10/18: Version 1.9.0.\n* Initial TypeScript support!\n* Add rx, ry attributes to control linear pb radius\n* Add cls parameter for style customization\n* Fix to avoid progress overflow\n* Fix for Safari positioning bug\n\n2020/09/22: Version 1.8.0. Add component composition handling in radial bars\n\n2020/09/05: Version 1.7.1. Small fixes\n\n2020/08/31: Version 1.7.0\n* Major store refactorization, simplified overall code\n* Label can be set from outside with the _valueLabel_ prop\n* Allow markup (and styling) in label\n* Add _bgFillColor_ property\n* Add _labelColor_ property\n\n2020/08/26: Version 1.6.2. Bugfixes for radial stacked progress bars\n\n2020/08/12: Version 1.6.1. Semicircular bar fixes\n\n2020/08/10: Version 1.6.0. Added _semicircle_ bar style\n\n2020/08/09: Version 1.5.0. _series_ prop become reactive\n\n2020/03/17: Version 1.4.0. Added thresholds, store refactorization\n\n2020/02/07: Version 1.3.1. Added \"addBackground\", \"bgColor\", \"stackSeries\", \"margin\" parameters.\nIntroduced \"legacy\" mode for compatibility with IE/Edge.\n\n2019/08/07: Added *dist* task\n\n2019/08/06: Refactored thin progressbars\n\n2019/08/02: Added *textSize* parameter\n\n2019/08/01: Handled svg viewport (width/height) while keeping proportions","funding_links":[],"categories":["components and libraries","HTML"],"sub_categories":["inputs and widgets"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokrad%2Fsvelte-progressbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokrad%2Fsvelte-progressbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokrad%2Fsvelte-progressbar/lists"}