├── .gitattributes ├── .eslintrc ├── .gitignore ├── poi.config.js ├── docs └── client │ ├── main.js │ └── app.vue ├── .editorconfig ├── src ├── index.js └── top-progress.vue ├── .babelrc ├── package.json ├── README.md └── dist └── vue-top-progress.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "dalphyx" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | npm-debug.log 4 | node_modules 5 | .vscode -------------------------------------------------------------------------------- /poi.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './docs/client/main.js', 3 | outDir: './docs/dist', 4 | publicPath: '' 5 | } 6 | -------------------------------------------------------------------------------- /docs/client/main.js: -------------------------------------------------------------------------------- 1 | import App from './app.vue' 2 | import Vue from 'vue' 3 | 4 | if (typeof window !== 'undefined') { 5 | /* eslint no-new: 0 */ 6 | new Vue({ 7 | el: '#app', 8 | render: h => h(App) 9 | }) 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import vueTopprogress from './top-progress.vue' 2 | 3 | const install = function (Vue, opt = {}) { 4 | if (install.installed) { 5 | return 6 | } 7 | 8 | Vue.component(vueTopprogress.name, vueTopprogress) 9 | } 10 | 11 | if (typeof window !== 'undefined' && window.Vue) { 12 | install(window.Vue) 13 | } 14 | 15 | export default { 16 | vueTopprogress, 17 | install 18 | } 19 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "loose": true, 7 | "targets": { 8 | "browsers": [ 9 | "last 2 versions", 10 | "ie >= 9" 11 | ] 12 | } 13 | } 14 | ], 15 | [ 16 | "@babel/preset-stage-2", 17 | { 18 | "decoratorsLegacy": true 19 | } 20 | ] 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-top-progress", 3 | "version": "0.7.0", 4 | "description": "Yet another top progress loading bar component for Vue.js", 5 | "main": "./dist/vue-top-progress.min.js", 6 | "files": [ 7 | "src", 8 | "dist" 9 | ], 10 | "scripts": { 11 | "lint": "eslint ./src/**", 12 | "build": "node build", 13 | "docs:dev": "poi", 14 | "docs:build": "poi build", 15 | "gh-docs": "npm run docs:build && gh-pages -d 'docs/dist' -m 'Deployed to Github Pages'" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/dalphyx/vue-top-progress.git" 20 | }, 21 | "keywords": [ 22 | "vue", 23 | "vue.js", 24 | "progress", 25 | "loading", 26 | "component", 27 | "vue-component", 28 | "progressbar", 29 | "loadingbar" 30 | ], 31 | "author": "dalphyx ", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/dalphyx/vue-top-progress/issues" 35 | }, 36 | "homepage": "https://github.com/dalphyx/vue-top-progress#readme", 37 | "devDependencies": { 38 | "@babel/core": "^7.0.0-beta.46", 39 | "@babel/preset-env": "^7.0.0-beta.46", 40 | "@babel/preset-stage-2": "^7.0.0-beta.46", 41 | "eslint": "^4.19.1", 42 | "eslint-config-dalphyx": "^0.2.0", 43 | "gh-pages": "^1.0.0", 44 | "poi": "^10.1.5", 45 | "rollup": "^0.58.2", 46 | "rollup-plugin-babel": "^4.0.0-beta.4", 47 | "rollup-plugin-uglify": "^3.0.0", 48 | "rollup-plugin-vue": "^3.0.0", 49 | "stylus-loader": "^3.0.2", 50 | "vue": "^2.5.16", 51 | "vue-template-compiler": "^2.5.16" 52 | }, 53 | "dependencies": {} 54 | } 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-top-progress [![npm package](https://img.shields.io/npm/v/vue-top-progress.svg)](https://www.npmjs.com/package/vue-top-progress) 2 | 3 | > Yet another top progress loading bar component for Vue.js. 4 | 5 | # Requirements 6 | 7 | - [Vue.js](https://github.com/vuejs/vue) `^2.0.0` 8 | 9 | # Installation 10 | 11 | ``` bash 12 | $ npm install vue-top-progress 13 | ``` 14 | # Demo 15 | [Demo](https://dalphyx.github.io/vue-top-progress/) 16 | 17 | # Usage 18 | ``` html 19 | 22 | 23 | 47 | ``` 48 | 49 | # Props 50 | 51 | `speed` 52 | 53 | Transition speed, in ms. Default: `350` 54 | 55 | `easing` 56 | 57 | Transition function. Default: `linear` 58 | 59 | `color` 60 | 61 | Color of progress bar. Default: `#29d` 62 | 63 | `colorShadow` 64 | 65 | Shadow of progress bar. If omitted, will use progress bar color. 66 | 67 | `errorColor` 68 | 69 | Color of progress bar when status is error. Default: `#f44336` 70 | 71 | `height` 72 | 73 | Height of progress bar. Default: `3` 74 | 75 | `trickle` 76 | 77 | Turn off the automatic incrementing behavior by setting this to `false`. Default: `true` 78 | 79 | `trickleSpeed` 80 | 81 | How often to trickle, in ms. Default: `250` 82 | 83 | `minimum` 84 | 85 | Minimum percentage used upon starting. Default: `0.8` 86 | 87 | `maximum` 88 | 89 | By default behavior, when progress start, it will never get to 100% until `done` or `fail` to be called. Setting this to adjust maximum percentage. Default: `97.5` 90 | 91 | `zIndex` 92 | 93 | The z-index of component. Default: `9999` 94 | 95 | # License 96 | 97 | [The MIT License](http://opensource.org/licenses/MIT) -------------------------------------------------------------------------------- /docs/client/app.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 68 | 69 | 113 | -------------------------------------------------------------------------------- /dist/vue-top-progress.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.vueTopProgress=e()}(this,function(){"use strict";function t(t,e,s){return ts?s:t}var e=function(){var t=[];function e(){var s=t.shift();s&&s(e)}return function(s){t.push(s),1===t.length&&e()}}(),s={render:function(){var t=this.$createElement,e=this._self._c||t;return e("transition",{attrs:{css:!1},on:{"before-enter":this.beforeEnter,enter:this.enter,"after-enter":this.afterEnter}},[this.show?e("div",{staticClass:"top-progress",style:this.barStyle},[e("div",{staticClass:"peg",style:this.pegStyle})]):this._e()])},staticRenderFns:[],name:"vueTopprogress",data:function(){return{error:!1,show:!1,progress:0,opacity:1,status:null,isPaused:!1}},props:{speed:{type:Number,default:350},color:{type:String,default:"#29d"},colorShadow:String,errorColor:{type:String,default:"#f44336"},trickle:{type:Boolean,default:!0},trickleSpeed:{type:Number,default:250},easing:{type:String,default:"linear"},height:{type:Number,default:3},minimum:{type:Number,default:.8},maximum:{type:Number,default:97.5},zIndex:{type:Number,default:9999}},computed:{progressColor:function(){return this.error?this.errorColor:this.color},isStarted:function(){return"number"==typeof this.status},boxShadow:function(){return this.colorShadow||this.progressColor},barStyle:function(){return{position:"fixed",top:"0",left:"0",right:"0",width:this.progress+"%",height:this.height+"px",backgroundColor:this.progressColor,transition:"all "+this.speed+"ms "+this.easing,opacity:""+this.opacity,zIndex:""+this.zIndex}},pegStyle:function(){return{display:"block",position:"absolute",right:"0",width:"100px",height:"100%",opacity:this.progress?"1":"0",boxShadow:"0 0 10px "+this.boxShadow+", 0 0 5px "+this.boxShadow,transform:"rotate(3deg) translate(0px, -4px)"}}},methods:{beforeEnter:function(t){this.opacity=0,this.progress=0,this.width=0},enter:function(t,e){this.opacity=1,e()},afterEnter:function(t){this._runStart()},_work:function(){var t=this;setTimeout(function(){t.isStarted&&!t.isPaused&&(t.increase(),t._work())},this.trickleSpeed)},_runStart:function(){this.status=100===this.progress?null:this.progress,this.trickle&&this._work()},start:function(){this.isPaused=!1,this.show?this._runStart():this.show=!0},set:function(s){var i,r=this;this.isPaused=!1,i=this.isStarted?s=0&&s<25?3*Math.random()+3:s>=25&&s<50?3*Math.random():s>=50&&s<85?2*Math.random():s>=85&&s<99?.5:0),this.set(t(s+e,0,this.maximum))},decrease:function(t){0!==this.progress&&this.increase(-t)},done:function(){this.set(100)},getProgress:function(){return this.status?this.progress:0},pause:function(){this.isPaused=!0},fail:function(){this.error=!0,this.done()}}},i=function t(e,i){void 0===i&&(i={}),t.installed||e.component(s.name,s)};return"undefined"!=typeof window&&window.Vue&&i(window.Vue),{vueTopprogress:s,install:i}}); 2 | -------------------------------------------------------------------------------- /src/top-progress.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 273 | --------------------------------------------------------------------------------