{"id":29687190,"url":"https://github.com/katerinalupacheva/react-progress-bar","last_synced_at":"2025-07-23T04:36:06.001Z","repository":{"id":38378961,"uuid":"254325398","full_name":"KaterinaLupacheva/react-progress-bar","owner":"KaterinaLupacheva","description":"Simple React progress bar component","archived":false,"fork":false,"pushed_at":"2025-05-07T19:07:46.000Z","size":7195,"stargazers_count":117,"open_issues_count":21,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-10T20:15:45.084Z","etag":null,"topics":["custom-component","progress-bar","react","typescript"],"latest_commit_sha":null,"homepage":"https://katerinalupacheva.github.io/react-progress-bar/","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/KaterinaLupacheva.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-09T09:18:21.000Z","updated_at":"2025-05-07T19:04:52.000Z","dependencies_parsed_at":"2023-12-28T09:48:09.328Z","dependency_job_id":null,"html_url":"https://github.com/KaterinaLupacheva/react-progress-bar","commit_stats":{"total_commits":154,"total_committers":8,"mean_commits":19.25,"dds":"0.24025974025974028","last_synced_commit":"4d735dbdd4111a91eb70e92ccbd4541dd51df96a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KaterinaLupacheva/react-progress-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Freact-progress-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Freact-progress-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Freact-progress-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Freact-progress-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaterinaLupacheva","download_url":"https://codeload.github.com/KaterinaLupacheva/react-progress-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaterinaLupacheva%2Freact-progress-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266618977,"owners_count":23957273,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["custom-component","progress-bar","react","typescript"],"created_at":"2025-07-23T04:36:03.776Z","updated_at":"2025-07-23T04:36:05.982Z","avatar_url":"https://github.com/KaterinaLupacheva.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @ramonak/react-progress-bar\n\n\u003e Progress Bar React Component\n\n[![NPM](https://img.shields.io/npm/v/@ramonak/react-progress-bar.svg)](https://www.npmjs.com/package/@ramonak/react-progress-bar) ![npm bundle size](https://img.shields.io/bundlephobia/min/@ramonak/react-progress-bar)![GitHub](https://img.shields.io/github/license/katerinalupacheva/react-progress-bar)![npm](https://img.shields.io/npm/dw/@ramonak/react-progress-bar)\n\n---\n\n![demo](https://i.ibb.co/Fgh0BsD/animated-demo.gif)\n\n---\n\n[Playground / Code Generator](https://katerinalupacheva.github.io/react-progress-bar/)\n\n---\n\n## Install\n\n```bash\nnpm install --save @ramonak/react-progress-bar\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\n\nimport ProgressBar from \"@ramonak/react-progress-bar\";\n\nconst Example = () =\u003e {\n return \u003cProgressBar completed={60} /\u003e;\n};\n```\n\n## Examples\n\n### Label without \"%\" at the end\n\n![example1](./images/example1.png)\n\n```jsx\n\n\u003cProgressBar completed=\"60\"\u003e\n```\n\n### Max completed value is greater than 100\n\n![example1](./images/example2.png)\n\n```jsx\n\u003cProgressBar completed={180} maxCompleted={200} /\u003e\n```\n\n### Custom Label\n\n![example1](./images/example3.png)\n\n```jsx\n\u003cProgressBar completed={60} customLabel=\"Not there yet\" /\u003e\n```\n\n### Custom class names\n\n![example1](./images/example4.png)\n\n```css\n//styles.scss\n\n.wrapper {\n border: 3px solid blue;\n}\n\n.container {\n background-color: pink;\n}\n\n.barCompleted {\n background-color: lightblue;\n width: 80%;\n}\n\n.label {\n font-size: 20px;\n color: green;\n}\n```\n\n```jsx\nimport './styles.scss'\n\n...\n\n\u003cProgressBar\n completed={80}\n className=\"wrapper\"\n barContainerClassName=\"container\"\n completedClassName=\"barCompleted\"\n labelClassName=\"label\"\n/\u003e\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| -------------------------- | -------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| `completed` (required) | `Number or string` | | Percentage of completed progress bar value. \u003cbr/\u003e If a string, the \"%\" won't be added to the label. See [Examples](#examples) |\n| `maxCompleted` | `number` | `100` | Max possible value of the `completed` prop |\n| `customLabel` | `string` | undefined | Custom label |\n| `bgColor` | `string` | `#6a1b9a` | Color of the completed bar |\n| `height` | `string` | `20px` | Height of the bar |\n| `width` | `string` | `100%` | Width of the bar |\n| `margin` | `string` | | Margin |\n| `padding` | `string` | | Padding |\n| `borderRadius` | `string` | `50px` | Border radius of the bar |\n| `baseBgColor` | `string` | `#e0e0de` | Color of the \"non-completed\" bar |\n| `labelAlignment` | `string:` \u003cbr/\u003e `left, center, right, outside` | `right` | Position of the label inside the completed bar or outside bar |\n| `labelColor` | `string` | `#fff` | Color of the label text |\n| `labelSize` | `string` | `15px` | Font-size of the label text |\n| `isLabelVisible` | `boolean` | `true` | Visibility of the label |\n| `transitionDuration` | `string` | `1s` | Duration of the width transition |\n| `transitionTimingFunction` | `string:` \u003cbr/\u003e `ease, linear, ease-in, ease-out, ease-in-out` | `ease-in-out` | Timing function of the width transition |\n| `animateOnRender` | `boolean` | false | Should the bar width be animated on the first render |\n| `initCompletedOnAnimation` | `string or number` | 0 | Initial completed value (e.g. the width of the completed bar) on animation start (applies only when `animateOnRender` is true) |\n| `className` | `string` | | Add a `className` to the parent `div` (see [example](#custom-class-names)) |\n| `barContainerClassName` | `string` | | Add a `className` to the container `div` (see [example](#custom-class-names)) |\n| `completedClassName` | `string` | | Add a `className` to the completed part of the bar (see [example](#custom-class-names)) |\n| `labelClassName` | `string` | | Add a `className` to the bar label (see [example](#custom-class-names)) |\n| `dir` | `string:` \u003cbr/\u003e `ltr, rtl, auto` | `ltr` | Progressbar HTML direction |\n| `ariaValuemin` | `number` | `0` | accessibility: Defines the minimum allowed value for a range |\n| `ariaValuemax` | `number` | `100` | accessibility: Defines the maximum allowed value for a range |\n| `ariaValuetext` | `number` | `null` | accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed) |\n| `customLabelStyles` | CSS.Properties | | custom CSS properties for a label |\n| `isIndeterminate` | boolean | `false` | indeterminate progress bar | \n\n## License\n\nMIT © [KaterinaLupacheva](https://github.com/KaterinaLupacheva)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaterinalupacheva%2Freact-progress-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaterinalupacheva%2Freact-progress-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaterinalupacheva%2Freact-progress-bar/lists"}