{"id":13424038,"url":"https://github.com/hilongjw/vue-progressbar","last_synced_at":"2025-05-14T13:08:55.959Z","repository":{"id":39613319,"uuid":"50559652","full_name":"hilongjw/vue-progressbar","owner":"hilongjw","description":"A lightweight progress bar for vue","archived":false,"fork":false,"pushed_at":"2024-03-10T04:29:15.000Z","size":503,"stargazers_count":1459,"open_issues_count":45,"forks_count":160,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-11T10:47:06.471Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://hilongjw.github.io/vue-progressbar","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/hilongjw.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":"2016-01-28T05:57:12.000Z","updated_at":"2025-04-30T08:49:16.000Z","dependencies_parsed_at":"2024-03-10T05:30:26.725Z","dependency_job_id":"02cf861c-da19-451e-89a6-77c1ed8ca0a7","html_url":"https://github.com/hilongjw/vue-progressbar","commit_stats":{"total_commits":69,"total_committers":24,"mean_commits":2.875,"dds":0.7536231884057971,"last_synced_commit":"a803468fd74d5c574595000d9ef394de5412d710"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-progressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-progressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-progressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hilongjw%2Fvue-progressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hilongjw","download_url":"https://codeload.github.com/hilongjw/vue-progressbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149975,"owners_count":22022852,"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":[],"created_at":"2024-07-31T00:00:47.271Z","updated_at":"2025-05-14T13:08:50.928Z","avatar_url":"https://github.com/hilongjw.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript","UI Components [🔝](#readme)","UI组件","Vue","Components \u0026 Libraries","UI Components","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins","装载机","UI Components","Loader"],"readme":"# vue-progressbar\n\n# Table of Contents\n* [___Demo___](#demo)\n* [___Requirements___](#requirements)\n* [___Installation___](#installation)\n* [___Usage___](#usage)  \n * [___Constructor Options___](#constructor-options)\n * [___Implementation___](#implementation)\n * [___vue-router___](#vue-router)  \n   * [___meta options___](#vue--router-meta-options)  \n* [___Methods___](#methods)\n* [___Examples___](#examples)\n* [___License___](#license)\n\n# Demo\n[___Demo___](http://hilongjw.github.io/vue-progressbar/index.html)\n# Requirements\n- [Vue.js](https://github.com/vuejs/vue) `1.x` or `2.x`  \n\n# Installation\n```bash\n# npm\n$ npm install vue-progressbar\n\n#yarn\n$ yarn add vue-progressbar\n```\n# Usage\n\nmain.js\n\n```javascript\nimport Vue from 'vue'\nimport VueProgressBar from 'vue-progressbar'\nimport App from './App'\n\nconst options = {\n  color: '#bffaf3',\n  failedColor: '#874b4b',\n  thickness: '5px',\n  transition: {\n    speed: '0.2s',\n    opacity: '0.6s',\n    termination: 300\n  },\n  autoRevert: true,\n  location: 'left',\n  inverse: false\n}\n\nVue.use(VueProgressBar, options)\n\nnew Vue({\n  ...App\n}).$mount('#app')\n\n\n```\n## Constructor Options\n|key|description|default|options|\n|:---|---|---|---|\n| `color`|color of the progress bar|`'rgb(143, 255, 199)'`|`RGB` `HEX` `HSL` `HSV` `VEC`|\n|`failedColor`|color of the progress bar upon load fail|`'red'`|`RGB`, `HEX`, `HSL`, `HSV`, `VEC`\n|`thickness`|thickness of the progress bar|`'2px'`|`px`, `em`, `pt`, `%`, `vh`, `vw`|\n|`transition`|transition speed/opacity/termination of the progress bar|`{speed: '0.2s', opacity: '0.6s', termination: 300}`|`speed`, `opacity`, `termination`|\n|`autoRevert`|will temporary color changes automatically revert upon completion or fail|`true`|`true`, `false`|\n|`location`|change the location of the progress bar|`top`|`left`, `right`, `top`, `bottom`|\n|`position`|change the position of the progress bar|`fixed`|`relative`, `absolute`, `fixed`|\n|`inverse`|inverse the direction of the progress bar|`false`|`true`, `false`|\n|`autoFinish`|allow the progress bar to finish automatically when it is close to 100%|`true`|`true`, `false`|\n\n## Implementation\n\nApp.vue\n```html\n\u003ctemplate\u003e\n    \u003cdiv id=\"app\"\u003e\n        \u003c!-- for example router view --\u003e\n        \u003crouter-view\u003e\u003c/router-view\u003e\n        \u003c!-- set progressbar --\u003e\n        \u003cvue-progress-bar\u003e\u003c/vue-progress-bar\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  mounted () {\n    //  [App.vue specific] When App.vue is finish loading finish the progress bar\n    this.$Progress.finish()\n  },\n  created () {\n    //  [App.vue specific] When App.vue is first loaded start the progress bar\n    this.$Progress.start()\n    //  hook the progress bar to start before we move router-view\n    this.$router.beforeEach((to, from, next) =\u003e {\n      //  does the page we want to go to have a meta.progress object\n      if (to.meta.progress !== undefined) {\n        let meta = to.meta.progress\n        // parse meta tags\n        this.$Progress.parseMeta(meta)\n      }\n      //  start the progress bar\n      this.$Progress.start()\n      //  continue to next page\n      next()\n    })\n    //  hook the progress bar to finish after we've finished moving router-view\n    this.$router.afterEach((to, from) =\u003e {\n      //  finish the progress bar\n      this.$Progress.finish()\n    })\n  }\n}\n\u003c/script\u003e\n```\n## vue-router\n```js\nexport default [\n  {\n    path: '/achievement',\n    name: 'achievement',\n    component: './components/Achievement.vue',\n    meta: {\n      progress: {\n        func: [\n          {call: 'color', modifier: 'temp', argument: '#ffb000'},\n          {call: 'fail', modifier: 'temp', argument: '#6e0000'},\n          {call: 'location', modifier: 'temp', argument: 'top'},\n          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}\n        ]\n      }\n    }\n  }\n]\n```\n### vue-router meta options\n\n|call|modifier|argument|example|\n|:---|---|---|---|\n|color|`set`, `temp`|`string`|`{call: 'color', modifier: 'temp', argument: '#ffb000'}`|\n|fail|`set`, `temp`|`string`|`{call: 'fail', modifier: 'temp', argument: '#ffb000'}`|\n|location|`set`, `temp`|`string`|`{call: 'location', modifier: 'temp', argument: 'top'}`|\n|transition|`set`, `temp`|` object`|`{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}`|\n\n# Methods\n|function|description|parameters|example|\n|:---|---|---|---|\n|start|start the progress bar loading|`N/A`|`this.$Progress.start()`|\n|finish|finish the progress bar loading|`N/A`|`this.$Progress.finish()`|\n|fail|cause the progress bar to end and fail|`N/A`|`this.$Progress.fail()`|\n|increase|increase the progress bar by a certain %|`number: integer`|`this.$Progress.increase(number)`|\n|decrease|decrease the progress bar by a certain %|`number: integer`|`this.$Progress.decrease(number)`|\n|set|set the progress bar %|`number: integer`|`this.$Progress.set(number)`|\n|setFailColor|cause the fail color to permanently change|`color: string`|`this.$Progress.setFailColor(color)`|\n|setColor|cause the progress color to permanently change|`color: string`|`this.$Progress.setColor(color)`|\n|setLocation|cause the progress bar location to permanently change|`location: string`|`this.$Progress.setLocation(location)`|\n|setTransition|cause the progress bar transition speed/opacity/termination to permanently change|`transition: object`|`this.$Progress.setTransition(transition)`|\n|tempFailColor|cause the fail color to change (temporarily)|`color: string`|`this.$Progress.tempFailColor(color)`|\n|tempColor|cause the progress color to change (temporarily)|`color: string`|`this.$Progress.tempColor(color)`|\n|tempLocation|cause the progress bar location to change (temporarily)|`location: string`|`this.$Progress.tempLocation(location)`|\n|tempTransition|cause the progress bar location to change (temporarily)|`transition: object`|`this.$Progress.tempTransition(transition)`|\n|revertColor|cause the temporarily set progress color to revert back to it's previous color|`N/A`|`this.$Progress.revertColor()`|\n|revertFailColor|cause the temporarily set fail color to revert back to it's previous color|`N/A`|`this.$Progress.revertFailColor()`|\n|revertTransition|cause the temporarily set transition to revert back to it's previous state|`N/A`|`this.$Progress.revertTransition()`|\n|revert|cause the temporarily set progress and/or fail color to their previous colors|`N/A`|`this.$Progress.revert()`|\n|parseMeta|parses progress meta data|`meta: object`|`this.$Progress.parseMeta(meta)`|\n\n# Examples\nLoading Data (vue-resource)\n```html\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    test () {\n      this.$Progress.start()\n      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')\n      .then((response) =\u003e {\n          this.$Progress.finish()\n      }, (response) =\u003e {\n          this.$Progress.fail()\n      })\n    }\n  }\n}\n\u003c/script\u003e\n\n```\n---\nAccessing the progress bar externally through the vue instance (e.g. axios interceptors)\n\n**main.js**\n```js\n// main.js from Usage section\n\nVue.use(VueProgressBar, options)\n\nexport default new Vue({ // export the Vue instance\n  ...App\n}).$mount('#app')\n```\n**api-axios.js**\n```js\nimport axios from 'axios';\nimport app from '../main'; // import the instance\n\nconst instance = axios.create({\n    baseURL: '/api'\n});\n\ninstance.interceptors.request.use(config =\u003e {\n    app.$Progress.start(); // for every request start the progress\n    return config;\n});\n\ninstance.interceptors.response.use(response =\u003e {\n    app.$Progress.finish(); // finish when a response is received\n    return response;\n});\n\nexport default instance; // export axios instance to be imported in your app\n```\n\n\n# License\n\n[The MIT License](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-progressbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhilongjw%2Fvue-progressbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhilongjw%2Fvue-progressbar/lists"}