{"id":13671872,"url":"https://github.com/nickbullll/react-sweet-progress","last_synced_at":"2026-03-03T19:01:15.070Z","repository":{"id":45668577,"uuid":"87460436","full_name":"nickbullll/react-sweet-progress","owner":"nickbullll","description":"A way to quickly add a progress bar to react app 🌈","archived":false,"fork":false,"pushed_at":"2021-05-10T14:09:06.000Z","size":42,"stargazers_count":251,"open_issues_count":11,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-31T04:39:56.045Z","etag":null,"topics":["css","css3","progress","progress-bar","progress-circle","progressbar","react","react-component","reactjs"],"latest_commit_sha":null,"homepage":"https://github.com/abraztsov/react-sweet-progress","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/nickbullll.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":"2017-04-06T18:13:33.000Z","updated_at":"2024-07-04T17:34:01.000Z","dependencies_parsed_at":"2022-07-17T04:30:28.806Z","dependency_job_id":null,"html_url":"https://github.com/nickbullll/react-sweet-progress","commit_stats":null,"previous_names":["abraztsov/react-sweet-progress"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/nickbullll/react-sweet-progress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2Freact-sweet-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2Freact-sweet-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2Freact-sweet-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2Freact-sweet-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickbullll","download_url":"https://codeload.github.com/nickbullll/react-sweet-progress/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2Freact-sweet-progress/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30056056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","css3","progress","progress-bar","progress-circle","progressbar","react","react-component","reactjs"],"created_at":"2024-08-02T09:01:20.700Z","updated_at":"2026-03-03T19:01:15.034Z","avatar_url":"https://github.com/nickbullll.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"React Sweet Progress\n=================\n[![npm version](https://badge.fury.io/js/react-sweet-progress.svg)](https://badge.fury.io/js/react-sweet-progress)\n\nA way to quickly add a react progress bar to your app 🌈\n\n![Imgur](http://i.imgur.com/Lhn7hqC.gif)\n\nBasic Usage\n-----\n\n1. Install via npm and yarn\n\n    ```\n    npm i -S react-sweet-progress\n\n    // or\n\n    yarn add react-sweet-progress\n    ```\n2. Import `Progress` and progress bar styles\n\n    ```\n    import { Progress } from 'react-sweet-progress';\n    import \"react-sweet-progress/lib/style.css\";\n    ```\n3. Enjoy\n    ```\n    \u003cProgress percent={88} status=\"success\" /\u003e\n    ```\n\n  ![Imgur](http://i.imgur.com/f6amLHz.png)\n\n  ```\n  \u003cProgress type=\"circle\" percent={100} status=\"success\" /\u003e\n  ```\n\n  ![Imgur](http://i.imgur.com/YdBD14Tm.png)\n\nCustomize\n-----\n\nBasic steps to customize React progress bar.\n\n### Percent 🏹\n\n`Percent` cant set the completion percentage of progress bar.\n\n```\n\u003cProgress /\u003e\n```\n\n![Imgur](http://i.imgur.com/Z5HNIL4.png)\n\n---\n\n```\n\u003cProgress\n  percent={69}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/YRSANGi.png)\n\n### Status ⭐\n\nYou can use 3 status types:  `active`, `error`, `success`. By default `status` equal to `success` when `percent` is `100`.\n\n```\n\u003cProgress\n  percent={88}\n  status=\"success\"\n/\u003e\n```\n![Imgur](http://i.imgur.com/f6amLHz.png)\n\n---\n\n```\n\u003cProgress\n  percent={43}\n  status=\"error\"\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/DqWdfud.png)\n\n### Exotic theme 🔥\n\nWith `theme` param you can customize icons and styles of the progress bar.\n\n```\n\u003cProgress\n  theme={{\n    success: {\n      symbol: '🏄‍',\n      color: 'rgb(223, 105, 180)'\n    },\n    active: {\n      symbol: '😀',\n      color: '#fbc630'\n    },\n    default: {\n      symbol: '😱',\n      color: '#fbc630'\n    }\n  }}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/bJmhojg.png)\n![Imgur](http://i.imgur.com/VK7AoHd.png)\n![Imgur](http://i.imgur.com/fTcn96g.png)\n\nIf you don't specify the theme `trail color`, then the deafult value of `#efefef` will be used.\n```\n\u003cProgress\n  theme={\n    {\n      error: {\n        symbol: this.state.percent + '%',\n        trailColor: 'pink',\n        color: 'red'\n      },\n      default: {\n        symbol: this.state.percent + '%',\n        trailColor: 'lightblue',\n        color: 'blue'\n      },\n      active: {\n        symbol: this.state.percent + '%',\n        trailColor: 'yellow',\n        color: 'orange'\n      },\n      success: {\n        symbol: this.state.percent + '%',\n        trailColor: 'lime',\n        color: 'green'\n      }\n    }\n  }\n/\u003e\n```\n![Imgur](https://i.imgur.com/QUu7ygb.gif)\n\nIf you don't pass custom `status` then it will use the default color theme.\n\n```\n\u003cProgress\n  theme={{\n    success: {\n      symbol: '🏄‍',\n      color: 'rgb(223, 105, 180)'\n    }\n  }}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/Z5HNIL4.png)\n![Imgur](http://i.imgur.com/cStkEcG.png)\n![Imgur](http://i.imgur.com/fTcn96g.png)\n\nAlso you can use the `status` param.\n\n```\n\u003cProgress\n  percent={100}\n  status=\"error\"\n  theme={{\n    error: {\n      symbol: '🤔',\n      color: '#fbc630'\n    }\n  }}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/ZF95CSp.png)\n\n### Circle width 😲\n\n`Width` param can set the size of `circle` progress bar, also it's set `font` and `icon` sizes automatically.\n\n```\n\u003cProgress\n  type=\"circle\"\n  width={70}\n  percent={70}\n/\u003e\n\u003cProgress\n  type=\"circle\"\n  percent={30}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/pkwejEs.png)\n\n### Circle strokeWidth 🤗\n\nWith `strokeWidth` param you can customize the `path` circle `strokeWidth`.\n\n```\n\u003cProgress\n  type=\"circle\"\n  strokeWidth={3}\n  percent={70}\n/\u003e\n\u003cProgress\n  type=\"circle\"\n  percent={30}\n/\u003e\n```\n\n![Imgur](http://i.imgur.com/qH4xv4B.png)\n\n## API\n\n### Progress\n\n| Property | Description                                                                            | Type          | Default |\n|----------|----------------------------------------------------------------------------------------|---------------|---------|\n| percent     | set the completion percentage                                      | number        | 0    |\n| status   |  set the status of the progress, options: `success`, `error`, `active`           | string        | -       |\n| theme    | set the custom styles of the progress, options: `[status]: { color: [string], trailColor: [string], symbol: '[any]'}`            | object        | -       |\n| style       | set the custom style of the react progress bar | object | -       |\n| type       | set the type of the progress bar, options: `circle` | string | -       |\n| width       | set sizes of progress bar type `circle` | number | 132       |\n| strokeWidth       | set strokeWidth of progress bar type `circle` | number | 6       |\n| className       | set the custom `class` of the react progress bar                         | object | -       |\n| symbolClassName       | set the `symbol` custom `class`                          | object | -       |\n\nSupported Browsers\n---\n`React Sweet Porgress` designed to support the latest web browsers. We support the current versions of Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 11. Also support the latest mobile browsers.\n\n\nHow to run example locally ?\n---\n1. `git clone https://github.com/abraztsov/react-sweet-progress.git`\n2. `cd react-sweet-progress`\n3. `npm start`\n4. Go to `localhost:8080`\n\nFeature Requests / Find Bug ?\n---\n\nHave an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!\n\n\nFAQ\n-----\n\nThis component based on [ant design progress]( https://ant.design/components/progress/). Huge thanks them for a such an awesome work.\n\nFuture Plans\n-----\n- [x] Create `Circle` progress\n- [ ] Add flexibility to custom styles\n\n### Updates\n\n1.1.1 Trail color can now be specified by a progress theme.\n\n1.1.0 Added `Circle` progress\n\n1.0.0 First release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickbullll%2Freact-sweet-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickbullll%2Freact-sweet-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickbullll%2Freact-sweet-progress/lists"}