├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── dist └── vue-progressbar.js ├── package.json ├── rollup.config.js ├── src ├── index.js └── vue-progressbar.vue └── tea.yaml /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "es2015", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "external-helpers" 12 | ] 13 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Awe 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-progressbar 2 | 3 | # Table of Contents 4 | * [___Demo___](#demo) 5 | * [___Requirements___](#requirements) 6 | * [___Installation___](#installation) 7 | * [___Usage___](#usage) 8 | * [___Constructor Options___](#constructor-options) 9 | * [___Implementation___](#implementation) 10 | * [___vue-router___](#vue-router) 11 | * [___meta options___](#vue--router-meta-options) 12 | * [___Methods___](#methods) 13 | * [___Examples___](#examples) 14 | * [___License___](#license) 15 | 16 | # Demo 17 | [___Demo___](http://hilongjw.github.io/vue-progressbar/index.html) 18 | # Requirements 19 | - [Vue.js](https://github.com/vuejs/vue) `1.x` or `2.x` 20 | 21 | # Installation 22 | ```bash 23 | # npm 24 | $ npm install vue-progressbar 25 | 26 | #yarn 27 | $ yarn add vue-progressbar 28 | ``` 29 | # Usage 30 | 31 | main.js 32 | 33 | ```javascript 34 | import Vue from 'vue' 35 | import VueProgressBar from 'vue-progressbar' 36 | import App from './App' 37 | 38 | const options = { 39 | color: '#bffaf3', 40 | failedColor: '#874b4b', 41 | thickness: '5px', 42 | transition: { 43 | speed: '0.2s', 44 | opacity: '0.6s', 45 | termination: 300 46 | }, 47 | autoRevert: true, 48 | location: 'left', 49 | inverse: false 50 | } 51 | 52 | Vue.use(VueProgressBar, options) 53 | 54 | new Vue({ 55 | ...App 56 | }).$mount('#app') 57 | 58 | 59 | ``` 60 | ## Constructor Options 61 | |key|description|default|options| 62 | |:---|---|---|---| 63 | | `color`|color of the progress bar|`'rgb(143, 255, 199)'`|`RGB` `HEX` `HSL` `HSV` `VEC`| 64 | |`failedColor`|color of the progress bar upon load fail|`'red'`|`RGB`, `HEX`, `HSL`, `HSV`, `VEC` 65 | |`thickness`|thickness of the progress bar|`'2px'`|`px`, `em`, `pt`, `%`, `vh`, `vw`| 66 | |`transition`|transition speed/opacity/termination of the progress bar|`{speed: '0.2s', opacity: '0.6s', termination: 300}`|`speed`, `opacity`, `termination`| 67 | |`autoRevert`|will temporary color changes automatically revert upon completion or fail|`true`|`true`, `false`| 68 | |`location`|change the location of the progress bar|`top`|`left`, `right`, `top`, `bottom`| 69 | |`position`|change the position of the progress bar|`fixed`|`relative`, `absolute`, `fixed`| 70 | |`inverse`|inverse the direction of the progress bar|`false`|`true`, `false`| 71 | |`autoFinish`|allow the progress bar to finish automatically when it is close to 100%|`true`|`true`, `false`| 72 | 73 | ## Implementation 74 | 75 | App.vue 76 | ```html 77 | 85 | 86 | 116 | ``` 117 | ## vue-router 118 | ```js 119 | export default [ 120 | { 121 | path: '/achievement', 122 | name: 'achievement', 123 | component: './components/Achievement.vue', 124 | meta: { 125 | progress: { 126 | func: [ 127 | {call: 'color', modifier: 'temp', argument: '#ffb000'}, 128 | {call: 'fail', modifier: 'temp', argument: '#6e0000'}, 129 | {call: 'location', modifier: 'temp', argument: 'top'}, 130 | {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}} 131 | ] 132 | } 133 | } 134 | } 135 | ] 136 | ``` 137 | ### vue-router meta options 138 | 139 | |call|modifier|argument|example| 140 | |:---|---|---|---| 141 | |color|`set`, `temp`|`string`|`{call: 'color', modifier: 'temp', argument: '#ffb000'}`| 142 | |fail|`set`, `temp`|`string`|`{call: 'fail', modifier: 'temp', argument: '#ffb000'}`| 143 | |location|`set`, `temp`|`string`|`{call: 'location', modifier: 'temp', argument: 'top'}`| 144 | |transition|`set`, `temp`|` object`|`{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}`| 145 | 146 | # Methods 147 | |function|description|parameters|example| 148 | |:---|---|---|---| 149 | |start|start the progress bar loading|`N/A`|`this.$Progress.start()`| 150 | |finish|finish the progress bar loading|`N/A`|`this.$Progress.finish()`| 151 | |fail|cause the progress bar to end and fail|`N/A`|`this.$Progress.fail()`| 152 | |increase|increase the progress bar by a certain %|`number: integer`|`this.$Progress.increase(number)`| 153 | |decrease|decrease the progress bar by a certain %|`number: integer`|`this.$Progress.decrease(number)`| 154 | |set|set the progress bar %|`number: integer`|`this.$Progress.set(number)`| 155 | |setFailColor|cause the fail color to permanently change|`color: string`|`this.$Progress.setFailColor(color)`| 156 | |setColor|cause the progress color to permanently change|`color: string`|`this.$Progress.setColor(color)`| 157 | |setLocation|cause the progress bar location to permanently change|`location: string`|`this.$Progress.setLocation(location)`| 158 | |setTransition|cause the progress bar transition speed/opacity/termination to permanently change|`transition: object`|`this.$Progress.setTransition(transition)`| 159 | |tempFailColor|cause the fail color to change (temporarily)|`color: string`|`this.$Progress.tempFailColor(color)`| 160 | |tempColor|cause the progress color to change (temporarily)|`color: string`|`this.$Progress.tempColor(color)`| 161 | |tempLocation|cause the progress bar location to change (temporarily)|`location: string`|`this.$Progress.tempLocation(location)`| 162 | |tempTransition|cause the progress bar location to change (temporarily)|`transition: object`|`this.$Progress.tempTransition(transition)`| 163 | |revertColor|cause the temporarily set progress color to revert back to it's previous color|`N/A`|`this.$Progress.revertColor()`| 164 | |revertFailColor|cause the temporarily set fail color to revert back to it's previous color|`N/A`|`this.$Progress.revertFailColor()`| 165 | |revertTransition|cause the temporarily set transition to revert back to it's previous state|`N/A`|`this.$Progress.revertTransition()`| 166 | |revert|cause the temporarily set progress and/or fail color to their previous colors|`N/A`|`this.$Progress.revert()`| 167 | |parseMeta|parses progress meta data|`meta: object`|`this.$Progress.parseMeta(meta)`| 168 | 169 | # Examples 170 | Loading Data (vue-resource) 171 | ```html 172 | 173 | 188 | 189 | ``` 190 | --- 191 | Accessing the progress bar externally through the vue instance (e.g. axios interceptors) 192 | 193 | **main.js** 194 | ```js 195 | // main.js from Usage section 196 | 197 | Vue.use(VueProgressBar, options) 198 | 199 | export default new Vue({ // export the Vue instance 200 | ...App 201 | }).$mount('#app') 202 | ``` 203 | **api-axios.js** 204 | ```js 205 | import axios from 'axios'; 206 | import app from '../main'; // import the instance 207 | 208 | const instance = axios.create({ 209 | baseURL: '/api' 210 | }); 211 | 212 | instance.interceptors.request.use(config => { 213 | app.$Progress.start(); // for every request start the progress 214 | return config; 215 | }); 216 | 217 | instance.interceptors.response.use(response => { 218 | app.$Progress.finish(); // finish when a response is received 219 | return response; 220 | }); 221 | 222 | export default instance; // export axios instance to be imported in your app 223 | ``` 224 | 225 | 226 | # License 227 | 228 | [The MIT License](http://opensource.org/licenses/MIT) 229 | -------------------------------------------------------------------------------- /dist/vue-progressbar.js: -------------------------------------------------------------------------------- 1 | !function(t,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):t.VueProgressBar=o()}(this,function(){"use strict";!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style"),i=" .__cov-progress { opacity: 1; z-index: 999999; } ";o.type="text/css",o.styleSheet?o.styleSheet.cssText=i:o.appendChild(document.createTextNode(i)),t.appendChild(o)}}();var t="undefined"!=typeof window,r={render:function(){var t=this,o=t.$createElement;return(t._self._c||o)("div",{staticClass:"__cov-progress",style:t.style})},staticRenderFns:[],name:"VueProgress",serverCacheKey:function(){return"Progress"},computed:{style:function(){var t=this.progress,o=t.options,i=!!o.show,e=o.location,s={"background-color":o.canSuccess?o.color:o.failedColor,opacity:o.show?1:0,position:o.position};return"top"===e||"bottom"===e?("top"===e?s.top="0px":s.bottom="0px",o.inverse?s.right="0px":s.left="0px",s.width=t.percent+"%",s.height=o.thickness,s.transition=(i?"width "+o.transition.speed+", ":"")+"opacity "+o.transition.opacity):"left"!==e&&"right"!==e||("left"===e?s.left="0px":s.right="0px",o.inverse?s.top="0px":s.bottom="0px",s.height=t.percent+"%",s.width=o.thickness,s.transition=(i?"height "+o.transition.speed+", ":"")+"opacity "+o.transition.opacity),s},progress:function(){return t?window.VueProgressBarEventBus.RADON_LOADING_BAR:{percent:0,options:{canSuccess:!0,show:!1,color:"rgb(19, 91, 55)",failedColor:"red",thickness:"2px",transition:{speed:"0.2s",opacity:"0.6s",termination:300},location:"top",autoRevert:!0,inverse:!1}}}}};return{install:function(o){var t=1 `production` is true 10 | // `npm run dev` -> `production` is false 11 | const production = !process.env.ROLLUP_WATCH 12 | 13 | export default { 14 | entry: `src/index.js`, 15 | dest: `dist/vue-progressbar.js`, 16 | format: 'umd', 17 | moduleName: 'VueProgressBar', 18 | plugins: [ 19 | json(), 20 | vue({ 21 | css: true 22 | }), 23 | replace({ 24 | 'process.env.NODE_ENV': JSON.stringify( 'production' ) 25 | }), 26 | resolve({ 27 | browser: true, 28 | extensions: ['.vue', '.js', '.json'] 29 | }), // tells Rollup how to find date-fns in node_modules 30 | commonjs(), // converts date-fns to ES modules 31 | babel(), 32 | production && uglify() // minify, but only in production 33 | ], 34 | sourceMap: false 35 | } 36 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import vueProgressBar from './vue-progressbar.vue' 4 | 5 | function assign (target, source) { // eslint-disable-line no-unused-vars 6 | for (var index = 1, key, src; index < arguments.length; ++index) { 7 | src = arguments[index]; 8 | 9 | for (key in src) { 10 | if (Object.prototype.hasOwnProperty.call(src, key)) { 11 | target[key] = src[key]; 12 | } 13 | } 14 | } 15 | 16 | return target 17 | } 18 | 19 | function install (Vue, options = {}) { 20 | const isVueNext = Vue.version.split('.')[0] === '2' 21 | const inBrowser = typeof window !== 'undefined' 22 | 23 | const DEFAULT_OPTION = { 24 | canSuccess: true, 25 | show: false, 26 | color: '#73ccec', 27 | position: 'fixed', 28 | failedColor: 'red', 29 | thickness: '2px', 30 | transition: { 31 | speed: '0.2s', 32 | opacity: '0.6s', 33 | termination: 300 34 | }, 35 | autoRevert: true, 36 | location: 'top', 37 | inverse: false, 38 | autoFinish: true 39 | } 40 | 41 | let Progress = { 42 | $vm: null, 43 | state: { 44 | tFailColor: '', 45 | tColor: '', 46 | timer: null, 47 | cut: 0 48 | }, 49 | init (vm) { 50 | this.$vm = vm 51 | }, 52 | start (time) { 53 | if (!this.$vm) return 54 | if (!time) time = 3000 55 | this.$vm.RADON_LOADING_BAR.percent = 0 // this.$vm.RADON_LOADING_BAR.percent 56 | this.$vm.RADON_LOADING_BAR.options.show = true 57 | this.$vm.RADON_LOADING_BAR.options.canSuccess = true 58 | this.state.cut = 10000 / Math.floor(time) 59 | clearInterval(this.state.timer) 60 | this.state.timer = setInterval(() => { 61 | this.increase(this.state.cut * Math.random()) 62 | if (this.$vm.RADON_LOADING_BAR.percent > 95 && this.$vm.RADON_LOADING_BAR.options.autoFinish) { 63 | this.finish() 64 | } 65 | }, 100) 66 | }, 67 | set (num) { 68 | this.$vm.RADON_LOADING_BAR.options.show = true 69 | this.$vm.RADON_LOADING_BAR.options.canSuccess = true 70 | this.$vm.RADON_LOADING_BAR.percent = Math.floor(num) 71 | }, 72 | get () { 73 | return Math.floor(this.$vm.RADON_LOADING_BAR.percent) 74 | }, 75 | increase (num) { 76 | this.$vm.RADON_LOADING_BAR.percent = Math.min(99, this.$vm.RADON_LOADING_BAR.percent + Math.floor(num)) 77 | }, 78 | decrease (num) { 79 | this.$vm.RADON_LOADING_BAR.percent = this.$vm.RADON_LOADING_BAR.percent - Math.floor(num) 80 | }, 81 | hide () { 82 | clearInterval(this.state.timer) 83 | this.state.timer = null 84 | setTimeout(() => { 85 | this.$vm.RADON_LOADING_BAR.options.show = false 86 | Vue.nextTick(() => { 87 | setTimeout(() => { 88 | this.$vm.RADON_LOADING_BAR.percent = 0 89 | }, 100) 90 | if (this.$vm.RADON_LOADING_BAR.options.autoRevert) { 91 | setTimeout(() => { 92 | this.revert() 93 | }, 300) 94 | } 95 | }) 96 | }, this.$vm.RADON_LOADING_BAR.options.transition.termination) 97 | }, 98 | pause () { 99 | clearInterval(this.state.timer) 100 | }, 101 | finish () { 102 | if (!this.$vm) return 103 | this.$vm.RADON_LOADING_BAR.percent = 100 104 | this.hide() 105 | }, 106 | fail () { 107 | this.$vm.RADON_LOADING_BAR.options.canSuccess = false 108 | this.$vm.RADON_LOADING_BAR.percent = 100 109 | this.hide() 110 | }, 111 | setFailColor (color) { 112 | this.$vm.RADON_LOADING_BAR.options.failedColor = color 113 | }, 114 | setColor (color) { 115 | this.$vm.RADON_LOADING_BAR.options.color = color 116 | }, 117 | setLocation (loc) { 118 | this.$vm.RADON_LOADING_BAR.options.location = loc 119 | }, 120 | setTransition (transition) { 121 | this.$vm.RADON_LOADING_BAR.options.transition = transition 122 | }, 123 | tempFailColor (color) { 124 | this.state.tFailColor = this.$vm.RADON_LOADING_BAR.options.failedColor 125 | this.$vm.RADON_LOADING_BAR.options.failedColor = color 126 | }, 127 | tempColor (color) { 128 | this.state.tColor = this.$vm.RADON_LOADING_BAR.options.color 129 | this.$vm.RADON_LOADING_BAR.options.color = color 130 | }, 131 | tempLocation (loc) { 132 | this.state.tLocation = this.$vm.RADON_LOADING_BAR.options.location 133 | this.$vm.RADON_LOADING_BAR.options.location = loc 134 | }, 135 | tempTransition (transition) { 136 | this.state.tTransition = this.$vm.RADON_LOADING_BAR.options.transition 137 | this.$vm.RADON_LOADING_BAR.options.transition = transition 138 | }, 139 | revertColor () { 140 | this.$vm.RADON_LOADING_BAR.options.color = this.state.tColor 141 | this.state.tColor = '' 142 | }, 143 | revertFailColor () { 144 | this.$vm.RADON_LOADING_BAR.options.failedColor = this.state.tFailColor 145 | this.state.tFailColor = '' 146 | }, 147 | revertLocation () { 148 | this.$vm.RADON_LOADING_BAR.options.location = this.state.tLocation 149 | this.state.tLocation = '' 150 | }, 151 | revertTransition () { 152 | this.$vm.RADON_LOADING_BAR.options.transition = this.state.tTransition 153 | this.state.tTransition = {} 154 | }, 155 | revert () { 156 | if (this.$vm.RADON_LOADING_BAR.options.autoRevert) { 157 | if (this.state.tColor) { 158 | this.revertColor() 159 | } 160 | if (this.state.tFailColor) { 161 | this.revertFailColor() 162 | } 163 | if (this.state.tLocation) { 164 | this.revertLocation() 165 | } 166 | if (this.state.tTransition && (this.state.tTransition.speed !== undefined || this.state.tTransition.opacity !== undefined)) { 167 | this.revertTransition() 168 | } 169 | } 170 | }, 171 | parseMeta (meta) { 172 | for (var x in meta.func) { 173 | let func = meta.func[x]; 174 | switch (func.call) { 175 | case 'color': 176 | switch (func.modifier) { 177 | case 'set': 178 | this.setColor(func.argument) 179 | break 180 | case 'temp': 181 | this.tempColor(func.argument) 182 | break 183 | } 184 | break; 185 | case 'fail': 186 | switch (func.modifier) { 187 | case 'set': 188 | this.setFailColor(func.argument) 189 | break 190 | case 'temp': 191 | this.tempFailColor(func.argument) 192 | break 193 | } 194 | break; 195 | case 'location': 196 | switch (func.modifier) { 197 | case 'set': 198 | this.setLocation(func.argument) 199 | break 200 | case 'temp': 201 | this.tempLocation(func.argument) 202 | break 203 | } 204 | break 205 | case 'transition': 206 | switch (func.modifier) { 207 | case 'set': 208 | this.setTransition(func.argument) 209 | break 210 | case 'temp': 211 | this.tempTransition(func.argument) 212 | break 213 | } 214 | break 215 | } 216 | } 217 | } 218 | } 219 | 220 | const progressOptions = assign(DEFAULT_OPTION, options) 221 | 222 | const VueProgressBarEventBus = new Vue({ 223 | data: { 224 | RADON_LOADING_BAR: { 225 | percent: 0, 226 | options: progressOptions 227 | } 228 | } 229 | }) 230 | 231 | if (inBrowser) { 232 | window.VueProgressBarEventBus = VueProgressBarEventBus 233 | Progress.init(VueProgressBarEventBus) 234 | } 235 | 236 | const Component = Vue.extend(vueProgressBar) 237 | document.body.appendChild((new Component().$mount()).$el) 238 | 239 | Vue.prototype.$Progress = Progress 240 | } 241 | 242 | export default { 243 | install 244 | } 245 | -------------------------------------------------------------------------------- /src/vue-progressbar.vue: -------------------------------------------------------------------------------- 1 | 7 | 10 | 77 | -------------------------------------------------------------------------------- /tea.yaml: -------------------------------------------------------------------------------- 1 | # https://tea.xyz/what-is-this-file 2 | --- 3 | version: 1.0.0 4 | codeOwners: 5 | - '0xD4dc0a52f6D50E50Eb69890C9Db341fa28940a37' 6 | quorum: 1 7 | --------------------------------------------------------------------------------