{"id":23094167,"url":"https://github.com/kwooshung/react-progressbar-wrapper","last_synced_at":"2026-05-19T14:37:19.023Z","repository":{"id":220546221,"uuid":"751734849","full_name":"kwooshung/react-progressbar-wrapper","owner":"kwooshung","description":"The progress bar wrapper at the top of the website supports RTL and the internal style is fully customized. This component only provides external wrapping elements and only a small amount of basic CSS data.","archived":false,"fork":false,"pushed_at":"2024-02-18T04:33:03.000Z","size":213,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T18:01:44.668Z","etag":null,"topics":["bar","load","loadbar","loading","nprogress","progress","progressbar","react","topbar","wrapper"],"latest_commit_sha":null,"homepage":"","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/kwooshung.png","metadata":{"files":{"readme":"README.md","changelog":"changelogs/.history","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":"2024-02-02T07:59:40.000Z","updated_at":"2024-02-22T18:28:48.000Z","dependencies_parsed_at":"2024-12-16T22:00:07.248Z","dependency_job_id":"dd524c18-5a6f-48ac-9929-61adca65b17b","html_url":"https://github.com/kwooshung/react-progressbar-wrapper","commit_stats":null,"previous_names":["kwooshung/react-progressbar-wrapper"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwooshung%2Freact-progressbar-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwooshung%2Freact-progressbar-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwooshung%2Freact-progressbar-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kwooshung%2Freact-progressbar-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kwooshung","download_url":"https://codeload.github.com/kwooshung/react-progressbar-wrapper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247061882,"owners_count":20877176,"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":["bar","load","loadbar","loading","nprogress","progress","progressbar","react","topbar","wrapper"],"created_at":"2024-12-16T21:57:18.761Z","updated_at":"2026-05-19T14:37:18.991Z","avatar_url":"https://github.com/kwooshung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# @kwooshung/react-progressbar-wrapper\n\nAn intuitive and user-friendly progress bar component. It supports custom positioning and styling, adapting to a variety of content and layout needs while providing a smooth user experience and high degree of customization.\n\n[![GitHub License](https://img.shields.io/github/license/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)](LICENSE)\n![GitHub Release Date - Published_At](https://img.shields.io/github/release-date/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=00b42A\u0026logo=github)\n![GitHub last commit](https://img.shields.io/github/last-commit/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n![GitHub top language](https://img.shields.io/github/languages/top/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n![GitHub issues](https://img.shields.io/github/issues/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n![Github Stars](https://img.shields.io/github/stars/kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)\n[![NPM Version](https://img.shields.io/npm/v/@kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026color=165dff)](https://www.npmjs.com/package/@kwooshung/react-progressbar-wrapper)\n[![Npm.js Downloads/Week](https://img.shields.io/npm/dw/@kwooshung/react-progressbar-wrapper?labelColor=272e3b\u0026labelColor=272e3b\u0026color=165dff\u0026logo=npm)](https://www.npmjs.com/package/@kwooshung/react-progressbar-wrapper)\n[![Github CI/CD](https://github.com/kwooshung/react-progressbar-wrapper/actions/workflows/ci.yml/badge.svg)](https://github.com/kwooshung/react-progressbar-wrapper/actions/)\n[![codecov](https://codecov.io/gh/kwooshung/react-progressbar-wrapper/graph/badge.svg?token=CBQ1WB8xkr)](https://codecov.io/gh/kwooshung/react-progressbar-wrapper)\n[![Maintainability](https://api.codeclimate.com/v1/badges/30c9c143fe08f23bb28f/maintainability)](https://codeclimate.com/github/kwooshung/react-progressbar-wrapper/maintainability)\n[![Gitee Repo](https://img.shields.io/badge/Gitee-react--progressbar--wrapper-165dff?logo=gitee)](https://gitee.com/kwooshung/react-progressbar-wrapper/)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"README.md\" style=\"font-weight:700;color:#165dff;text-decoration:underline;\"\u003eEnglish\u003c/a\u003e | \n    \u003ca href=\"README.zh-CN.md\"\u003e中文\u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\n# Why Develop It?\n\n- Why not use [NProgress](https://github.com/rstacruz/nprogress)? I used to be a frequent user of it as well, but over time, I found that it didn't meet my requirements. I was looking for a way to offer users a more realistic simulation of loading experiences, rather than just a simple, uniform speed load.\n\n- The style isn't flexible enough. I wanted to be able to customize the style of the loading bar, such as its color, height, and position. Although [NProgress](https://github.com/rstacruz/nprogress) supports customization, I'm not fond of its method of definition. More importantly, it doesn't allow for defining the **direction** and **position** of the scrollbar.\n\n# Why Use It?\n\n- Supports customization of styles and components, offering more flexibility than just passing in properties.\n- Simulates a more realistic loading experience. For example, it loads to 60% in 3 seconds, then slowly to 80% over the next 5 seconds. It stops at 80% and waits for further instructions until the `done` property is `true`, at which point the loading bar immediately reaches 100% and then gradually fades away. For more details, refer to the `API` section below.\n- Multiple events for easy monitoring of the progress bar at each stage.\n- Versatile positioning options: you can place it at the top, bottom, left, or right side.\n- Various loading directions, including from left to right, right to left, top to bottom, and bottom to top, suitable for **rtl** and **horizontal** web page scenarios.\n- Supports bilingual comments in both English and Chinese.\n- Low learning curve, simple and flexible to use.\n- Implemented with modern **ES6** features.\n- Written in **TypeScript** for type safety.\n- Supports on-demand import with `esm` modularization, natively supporting **tree-shaking**, so you don't have to worry about the size after packaging.\n- This project also provides a `commonjs` (`cjs`) version.\n- Test coverage of **100%**.\n\n# Installation\n\n## npm\n\n```bash\nnpm install @kwooshung/react-progressbar-wrapper\n```\n\n## yarn\n\n```bash\nyarn add @kwooshung/react-progressbar-wrapper\n```\n\n## pnpm\n\n```bash\npnpm add @kwooshung/react-progressbar-wrapper\n```\n\n# Usage\n\n## Style\n\nIn some frameworks, you can directly import the styles in the global `css` / `less` / `scss` files as shown below:\n\n```css\n@import url('@kwooshung/react-progressbar-wrapper/dist/index.css');\n```\n\nIn certain frameworks, like `Next.js`, you may need to add a `~` symbol for it to work, as shown below:\n\n```css\n@import url('~@kwooshung/react-progressbar-wrapper/dist/index.css');\n```\n\nYou can also import it in a global page, such as the `Layout` page in `Next.js`, or within the corresponding component, as shown below:\n\n```tsx\nimport '@kwooshung/react-progressbar-wrapper/dist/index.css';\n```\n\n## Components\n\n在某个元素上使用 `ReactProgressbarWrapper` 组件，如下所示：\n\n```tsx\nimport { KsProgressbarWrapper } from '@kwooshung/react-progressbar-wrapper';\nimport '@kwooshung/react-progressbar-wrapper/dist/index.css';\n\nconst ProgressChildren = \u003cdiv style={{ height: '2px', background: 'linear-gradient(112.44deg,#ff5858 2.09%,#c058ff 75.22%)', backgroundSize: '165%' }} /\u003e;\n\nconst Demo = () =\u003e {\n  const [active, setActive] = useState\u003cboolean\u003e(false);\n  const [done, setDone] = useState\u003cboolean\u003e(false);\n  return (\n    \u003c\u003e\n      \u003cKsProgressbarWrapper active={active} done={done}\u003e\n        {ProgressChildren}\n      \u003c/KsProgressbarWrapper\u003e\n      \u003cbutton onClick={() =\u003e setActive(!active)}\u003eToggle\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nexport default Demo;\n```\n\n# API\n\n## Props\n\n| Parameter          | Description                                                                                                                                                                        | Type    | Default |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |\n| active             | Controls whether the progress bar is active.                                                                                                                                       | boolean | false   |\n| done               | Indicates whether the loading is complete.                                                                                                                                         | boolean | false   |\n| position           | Sets the position and direction of the progress bar. Options: 't-lr', 't-rl', 'b-lr', 'b-rl', 'l-tb', 'l-bt', 'r-tb', 'r-bt'. See `Position and Direction` below for more details. | string  | 't-lr'  |\n| loadTo             | Sets the initial percentage to load to.                                                                                                                                            | number  | 65      |\n| durationLoadTo     | Sets the time (in milliseconds) to reach the `loadTo` percentage.                                                                                                                  | number  | 3000    |\n| loadToSlow         | Sets the target percentage for slow loading.                                                                                                                                       | number  | 85      |\n| durationLoadToSlow | Sets the time (in milliseconds) to reach the `loadToSlow` percentage.                                                                                                              | number  | 6000    |\n| fluctuation        | Sets the fluctuation range at the end of each stage. For instance, if `loadTo` is set to `60%`, the endpoint will randomly be between `50%~70%`.                                   | number  | 10      |\n| delayHide          | Sets the delay time (in milliseconds) to hide after completion.                                                                                                                    | number  | 500     |\n| durationHide       | Sets the duration (in milliseconds) of the hide animation.                                                                                                                         | number  | 300     |\n\n## Events\n\n| Event              | Description                                                                         | Type                    |\n| ------------------ | ----------------------------------------------------------------------------------- | ----------------------- |\n| onStart            | Triggered when the progress bar starts loading.                                     | () =\u003e void;             |\n| onLoadToStart      | Triggered when `loadTo` starts loading.                                             | () =\u003e void;             |\n| onLoadToUpdate     | Triggered during `loadTo` loading, parameter is the current loading percentage.     | (value:number) =\u003e void; |\n| onLoadToDone       | Triggered when `loadTo` loading is complete.                                        | () =\u003e void;             |\n| onLoadToSlowStart  | Triggered when `loadToSlow` starts loading.                                         | () =\u003e void;             |\n| onLoadToSlowUpdate | Triggered during `loadToSlow` loading, parameter is the current loading percentage. | (value:number) =\u003e void; |\n| onLoadToSlowDone   | Triggered when `loadToSlow` loading is complete.                                    | () =\u003e void;             |\n| onUpdate           | Triggered during overall loading, parameter is the current loading percentage.      | (value:number) =\u003e void; |\n| onDone             | Triggered when the progress bar loading is complete.                                | () =\u003e void;             |\n\n## Position and Direction\n\n- t-lr: Top from left to right\n- t-rl: Top from right to left\n- b-lr: Bottom from left to right\n- b-rl: Bottom from right to left\n- l-tb: Left side from top to bottom\n- l-bt: Left side from bottom to top\n- r-tb: Right side from top to bottom\n- r-bt: Right side from bottom to top\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwooshung%2Freact-progressbar-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkwooshung%2Freact-progressbar-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkwooshung%2Freact-progressbar-wrapper/lists"}