{"id":16958601,"url":"https://github.com/vortesnail/qier-progress","last_synced_at":"2025-04-04T15:05:40.987Z","repository":{"id":40646834,"uuid":"238699546","full_name":"vortesnail/qier-progress","owner":"vortesnail","description":":dancer: Look at me, I am a slim progress bar and very colorful / 支持彩色或单色的顶部进度条","archived":false,"fork":false,"pushed_at":"2023-03-03T10:02:07.000Z","size":1584,"stargazers_count":400,"open_issues_count":14,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-14T22:43:00.280Z","etag":null,"topics":["progress","progress-bar","qier-progress","qprogress"],"latest_commit_sha":null,"homepage":"https://vortesnail.github.io/qier-progress/","language":"TypeScript","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/vortesnail.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-02-06T13:49:43.000Z","updated_at":"2024-10-07T17:49:32.000Z","dependencies_parsed_at":"2023-10-21T04:00:52.429Z","dependency_job_id":null,"html_url":"https://github.com/vortesnail/qier-progress","commit_stats":{"total_commits":36,"total_committers":3,"mean_commits":12.0,"dds":0.05555555555555558,"last_synced_commit":"81b63aad2a5b0e80cf38e13228f05be520879560"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fqier-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fqier-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fqier-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vortesnail%2Fqier-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vortesnail","download_url":"https://codeload.github.com/vortesnail/qier-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198439,"owners_count":20900079,"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":["progress","progress-bar","qier-progress","qprogress"],"created_at":"2024-10-13T22:43:02.865Z","updated_at":"2025-04-04T15:05:40.964Z","avatar_url":"https://github.com/vortesnail.png","language":"TypeScript","funding_links":[],"categories":["前端 \u003ca name=\"frontend\"\u003e\u003c/a\u003e"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vortesnail/qier-progress\"\u003e\n    \u003cimg width=\"271\" src=\"https://cdn.nlark.com/yuque/0/2020/png/341314/1581180114750-bcd1cc60-0847-49e0-96bd-da4e76901f87.png#align=left\u0026display=inline\u0026height=24\u0026name=%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202020-02-09%2000.39.47.png\u0026originHeight=226\u0026originWidth=2560\u0026size=340990\u0026status=done\u0026style=none\u0026width=271\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eSlim progress bars for anywhere you want to use\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![npm version](https://img.shields.io/npm/v/qier-progress)](https://www.npmjs.com/package/qier-progress) [![package size](https://img.shields.io/bundlephobia/minzip/qier-progress)](https://www.npmjs.com/package/qier-progress) [![download](https://img.shields.io/npm/dm/qier-progress)](https://www.npmjs.com/package/qier-progress) [![Build Status](https://travis-ci.org/vortesnail/qier-progress.svg?branch=master)](https://travis-ci.org/vortesnail/qier-progress) [![Coverage Status](https://coveralls.io/repos/github/vortesnail/qier-progress/badge.svg?branch=master)](https://coveralls.io/github/vortesnail/qier-progress?branch=master)\n\n\n[简体中文](./READM-zh-CN.md) \u0026#124; English\n\n\u003c/div\u003e\n\n## Introduction\n\n`qier-progress` is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used [nprogress](https://github.com/rstacruz/nprogress), then you must know what I am talking about ~\n\n💃[check demo](https://vortesnail.github.io/qier-progress/)\n\n## Quick Start\n#### 🛠 Install\n```javascript\nnpm install --save qier-progress\n```\n\n#### 📦 Use\nFirstly, import module in Vue, React, Angular wherever es6 module is supported .\n```javascript\nimport QProgress from 'qier-progress'\n```\n\nSecondly, create instance.\n```javascript\nconst qprogress = new QProgress()\n```\n\nThirdly, simply call `start()` and `finish()` to control the progress bar.\n```javascript\nqprogress.start()\nqprogress.finish()\n```\n\n## Advanced usage\n#### 📌 Set progress value:\nUse `.set(n)` to set a progress percentage, where ![](https://cdn.nlark.com/yuque/__latex/7b8b965ad4bca0e41ab51de7b31363a1.svg#card=math\u0026code=n\u0026height=12\u0026width=10) is a number between `0..1` .\n```javascript\nqprogress.set(0.0)     // same as .start()\nqprogress.set(0.6)\nqprogress.set(1.0)     // same as .finish()\n```\n\n#### 🎢 Increase manually:\nUse `.inc(n)` to increment the progress bar, but it will stop increasing after reaching the threshold, means it will never reach `100%` .\n```javascript\nqprogress.inc()\nqprogress.inc(0.2)\t// specific value you want\n```\n\n#### 🥣 Forced finished:\nUse `.finish()` to unmount the progress var, of course, there will also have an end process animation.\n```javascript\nqprogress.finish()\n```\n\n#### 🧮 Get current progress value:\nUse `.status` to get current value ![](https://cdn.nlark.com/yuque/__latex/7b8b965ad4bca0e41ab51de7b31363a1.svg#card=math\u0026code=n\u0026height=12\u0026width=10) where is a number between `0..1` .\n```javascript\nqprogress.status\n```\n\n## Configuration\n#### 🤔 How to customize\nWhen creating an instance, you can customize some parameters like this：\n```javascript\nconst qprogress = new QProgress({\n  minimum: 0.08,\n  height: 3,\n  color: '#17829f'\n})\n```\n\n#### 📕 Configuration list\n| Parameter | Description | Type | Default |\n| --- | --- | --- | --- |\n| `minimum` | Minimum percentage used upon starting. | number(0..1) | 0.12 |\n| `height` | Progress bar's height, unit is `px` . | number | 2 |\n| `color` | Progress bar's color, support RGB. | string | '#1890ff' |\n| `colorful` | Colorful mode switch. | boolean | true |\n| `easing` | Css transition property `time-function` . | string | 'ease' |\n| `speed` | Css transition property `duration` , unit is `ms` . | number | 400 |\n| `trickle` | Automatic incrementing behavior switch. | boolean | true |\n| `trickleSpeed` | Automatic incrementing speed, means increment interval, unit is `ms` . | number | 400 |\n| `parentNode` | Specify this to change the parent container. | Element \u0026#124; string | 'body' |\n\n\n## Contribution\nWelcome to participate in this project, please read [CONTRIBUTING](ssd) carefully.\n\n## Inspiration and purpose\nFirst of all, I am a beginner of `typescript` . When I enjoy the convenience brought by [nprogress](https://github.com/rstacruz/nprogress), I hope that I can learn a little bit from it, so I retyped this plugin using `typescript`  and added some other features. I learned a lot of coding knowledge in the process, and finally I sincerely thank the [nprogress contributors](https://github.com/rstacruz/nprogress/graphs/contributors) very much, respect!\n\n## About me\n[![Github.svg](https://cdn.nlark.com/yuque/0/2020/svg/341314/1581188387396-7788bf71-e189-4c34-bcaa-eaa5b0055497.svg#align=left\u0026display=inline\u0026height=24\u0026name=Github.svg\u0026originHeight=32\u0026originWidth=32\u0026size=2534\u0026status=done\u0026style=none\u0026width=24)](https://github.com/vortesnail) [![juejin-02.svg](https://cdn.nlark.com/yuque/0/2020/svg/341314/1581188386963-d8bc6ee6-b3f4-47f8-b53c-5bd493c890b4.svg#align=left\u0026display=inline\u0026height=24\u0026name=juejin-02.svg\u0026originHeight=32\u0026originWidth=32\u0026size=884\u0026status=done\u0026style=none\u0026width=24)](https://juejin.im/user/5da573d3f265da5b8a5168a6) [![哔哩哔哩.svg](https://cdn.nlark.com/yuque/0/2020/svg/341314/1581188388001-39360fed-b53a-47db-8b83-cff8126561da.svg#align=left\u0026display=inline\u0026height=24\u0026name=%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9.svg\u0026originHeight=32\u0026originWidth=32\u0026size=6080\u0026status=done\u0026style=none\u0026width=24)](https://space.bilibili.com/80755916) [![知乎.svg](https://cdn.nlark.com/yuque/0/2020/svg/341314/1581188354814-5e2956ab-2895-4f09-b788-7c5175160e41.svg#align=left\u0026display=inline\u0026height=24\u0026name=%E7%9F%A5%E4%B9%8E.svg\u0026originHeight=32\u0026originWidth=32\u0026size=2265\u0026status=done\u0026style=none\u0026width=24)](https://www.zhihu.com/people/vortesnail)\n\n## License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvortesnail%2Fqier-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvortesnail%2Fqier-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvortesnail%2Fqier-progress/lists"}