├── gulpfile.js ├── package.json ├── vue-loading-bar.css ├── LICENSE ├── vue-loading-bar.min.js ├── index.html ├── vueku.js ├── vue-loading-bar.js ├── README.md ├── example.html └── vue-loading-bar.vue /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var browserify = require('browserify'); 3 | var vueify = require('vueify'); 4 | var source = require('vinyl-source-stream'); 5 | // var livereload = require('gulp-livereload'); 6 | 7 | 8 | gulp.task('build-js',function () { 9 | return browserify({ 10 | entries: './vueku.js', 11 | debug: true 12 | }) 13 | .transform(vueify) 14 | .bundle() 15 | .pipe(source('build.js')) 16 | .pipe(gulp.dest('./')); 17 | // .pipe(livereload()); 18 | }); 19 | 20 | gulp.task('dev', function () { 21 | // livereload.listen(); 22 | gulp.watch(['./*.vue','./vueku.js','./*.html'],['build-js']); 23 | }); 24 | 25 | gulp.task('default', ['dev']); 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-loading-bar", 3 | "version": "1.0.0", 4 | "description": "Youtube Like Loading Bar Component for Vue.Js", 5 | "main": "vue-loading-bar.vue", 6 | "keywords": [ 7 | "vuejs", 8 | "loading", 9 | "loading bar", 10 | "component", 11 | "progress" 12 | ], 13 | "author": "Bos Naufal ", 14 | "license": "MIT", 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/BosNaufal/vue-loading-bar.git" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/BosNaufal/vue-loading-bar/issues" 21 | }, 22 | "homepage": "https://github.com/BosNaufal/vue-loading-bar#readme" 23 | } 24 | -------------------------------------------------------------------------------- /vue-loading-bar.css: -------------------------------------------------------------------------------- 1 | .loading-bar{ 2 | transition:all 0.3s ease; 3 | -moz-transition:all 0.3s ease; 4 | -webkit-transition:all 0.3s ease; 5 | -o-transition:all 0.3s ease; 6 | } 7 | .loading-bar{ 8 | position: fixed; 9 | top: 0; 10 | background: #1AF184; 11 | height: 3px; 12 | opacity: 1; 13 | } 14 | .glow-bar{ 15 | top: 0; 16 | position: absolute; 17 | width: 100px; 18 | height: 100%; 19 | box-shadow: -3px 0 15px 1px rgba(0, 255, 231, 0.4) 20 | } 21 | 22 | .to-right.loading-bar{ 23 | left: 0; 24 | } 25 | .to-right .glow-bar{ 26 | right: 0; 27 | } 28 | 29 | .to-left.loading-bar{ 30 | right: 0; 31 | } 32 | .to-left .glow-bar{ 33 | left: 0; 34 | } 35 | 36 | .full.loading-bar{ 37 | transition:all 0.1s ease; 38 | -moz-transition:all 0.1s ease; 39 | -webkit-transition:all 0.1s ease; 40 | -o-transition:all 0.1s ease; 41 | height: 0; 42 | opacity: 0; 43 | } 44 | 45 | .error.loading-bar{ 46 | background: #F44336; 47 | } 48 | .error .glow-bar{ 49 | box-shadow: -3px 0 15px 1px rgba(244, 67, 54, 0.4); 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Naufal Rabbani 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 | -------------------------------------------------------------------------------- /vue-loading-bar.min.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal) 2 | * Licensed Under MIT (http://opensource.org/licenses/MIT) 3 | * 4 | * Version 0.0.1 5 | * 6 | */ 7 | var VueLoadingBar=Vue.extend({template:"
",props:{id:String,"class":String,progress:Number,direction:{type:String,"default":"right"},error:Boolean},data:function(){return{show:!0,full:"",width:0,wait:!1}},watch:{progress:function(b,c){var a=this;0==c&&0b&&this.$dispatch("loading-bar:loading");100==this.progress?(this.wait=!0,this.width=100,setTimeout(function(){a.full="full";a.error=!1;setTimeout(function(){a.show=!1;a.progress=0;a.wait=!1;setTimeout(function(){a.full="";a.show=!0;a.$dispatch("loading-bar:loaded")})},250)},700)):(this.full="",this.width=b)},error:function(b,c){this.progress=100;this.$dispatch("loading-bar:error")}},methods:{styling:function(){return this.wait?{width:"100%"}:{width:this.width+"%"}}}}); 9 | Vue.component("loading-bar",VueLoadingBar); 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Loading Bar Component 6 | 41 | 42 | 43 | 44 | 45 |
46 |

Vue Loading Bar

47 |

Progress is {{ progress }}% {{ status }}

48 |
49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /vueku.js: -------------------------------------------------------------------------------- 1 | global.Vue = require('vue'); 2 | 3 | Vue.config.debug = true; 4 | 5 | new Vue({ 6 | el: 'body', 7 | 8 | data(){ 9 | return { 10 | progress: 0, 11 | status: "doesn't start yet", 12 | error: false, 13 | direction: false 14 | }; 15 | }, 16 | 17 | components: { 18 | 'loading-bar': require('./vue-loading-bar.vue') 19 | }, 20 | 21 | methods: { 22 | progressTo(val){ 23 | this.progress = val; 24 | }, 25 | 26 | setToError(bol){ 27 | this.error = bol; 28 | this.status = "Error"; 29 | }, 30 | 31 | changeDirection(direction){ 32 | if(this.progress > 0){ 33 | this.progress = 100; 34 | } 35 | this.direction = !this.direction; 36 | } 37 | 38 | }, 39 | 40 | events: { 41 | 42 | /** 43 | * Global Loading Callback Event 44 | * 45 | * @event-name loading-bar:{event-name} 46 | */ 47 | 48 | // Loading Bar on started 49 | 'loading-bar:started': function (){ 50 | console.log('started'); 51 | this.status = "started"; 52 | }, 53 | 54 | // Loading Bar on loading 55 | 'loading-bar:loading': function (){ 56 | console.log('loading'); 57 | this.status = "loading"; 58 | }, 59 | 60 | // Loading Bar on loaded 61 | 'loading-bar:loaded': function (){ 62 | console.log('loaded'); 63 | this.status = "loaded"; 64 | }, 65 | 66 | // Loading Bar on error 67 | 'loading-bar:error': function (){ 68 | console.log('error'); 69 | this.status = "error"; 70 | }, 71 | 72 | 73 | }, 74 | 75 | ready(){ 76 | var self = this; 77 | self.progress = 10; 78 | for (var i = 0; i < 30; i++) { 79 | if(i > 20 && i < 29){ 80 | setTimeout(function () { 81 | self.progress += 5; 82 | },50*i); 83 | }else{ 84 | setTimeout(function () { 85 | self.progress ++; 86 | },10*i); 87 | } 88 | } 89 | setTimeout(function () { 90 | self.progress = 100; 91 | },1500); 92 | } 93 | 94 | }); 95 | -------------------------------------------------------------------------------- /vue-loading-bar.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal) 2 | * Licensed Under MIT (http://opensource.org/licenses/MIT) 3 | * 4 | * Version 0.0.1 5 | * 6 | */ 7 | 8 | var VueLoadingBar = Vue.extend ({ 9 | template: '
', 10 | 11 | props: { 12 | id: String, 13 | class: String, 14 | 15 | progress: Number, // The progress of loading bar 16 | 17 | // the direction of loading bar 18 | direction: { 19 | type: String, 20 | default: "right" 21 | }, 22 | 23 | error: Boolean // Loading Bar error state 24 | }, 25 | 26 | data: function() { 27 | return { 28 | // To show 29 | show: true, 30 | 31 | // binding class when it end 32 | full: '', 33 | 34 | // state to animate the width of loading bar 35 | width: 0, 36 | 37 | // indicate the loading bar is in 100% ( so, wait it till gone ) 38 | wait: false 39 | }; 40 | }, 41 | 42 | watch:{ 43 | 44 | progress: function(val,old){ 45 | var self = this; 46 | 47 | if(old == 0 && val > 0){ 48 | // Callback Event when it's started 49 | this.$dispatch('loading-bar:started'); 50 | } 51 | 52 | if(val > 1 && val < 100){ 53 | // Callback Event when it's loading 54 | this.$dispatch('loading-bar:loading'); 55 | } 56 | 57 | // When the progress end 58 | if(this.progress == 100){ 59 | 60 | // Prevent new progress change 61 | this.wait = true; 62 | 63 | // Start animate it 64 | this.width = 100; 65 | 66 | setTimeout(function(){ 67 | // animate when element removed 68 | self.full = 'full'; 69 | self.error = false; 70 | 71 | setTimeout(function () { 72 | //remove bar element 73 | self.show = false; 74 | 75 | // New Element is available to create now 76 | self.progress = 0; 77 | self.wait = false; 78 | 79 | setTimeout(function () { 80 | // Show Bar 81 | self.full = ''; 82 | self.show = true; 83 | 84 | // Callback Event when it's loaded and totally gone 85 | self.$dispatch('loading-bar:loaded'); 86 | }); 87 | 88 | // Duration to Waiting for slick hiding animation 89 | },250); 90 | 91 | // Duration is depend on css animation-duration of loading-bar 92 | },700); 93 | 94 | // When the progress doesn't end yet 95 | }else{ 96 | 97 | // Do normaly loading bar animation 98 | this.full = ''; 99 | this.width = val; 100 | 101 | } 102 | 103 | }, 104 | 105 | error: function(val,old){ 106 | this.progress = 100; 107 | // Callback Event when it's error 108 | this.$dispatch('loading-bar:error'); 109 | } 110 | 111 | }, 112 | 113 | methods: { 114 | styling: function(){ 115 | // When loading bar still in progress 116 | if(!this.wait){ 117 | return { width: this.width+'%' }; 118 | 119 | // When loading bar end 120 | }else{ 121 | // Make it stuck at 100 to waiting the animation 122 | return{ width: '100%' }; 123 | } 124 | 125 | } 126 | 127 | } 128 | }); 129 | 130 | // Register 131 | Vue.component('loading-bar',VueLoadingBar); 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-loading-bar 2 | Loading Bar Component for [Vue.Js](http://vuejs.org) 3 | 4 | [DEMO](https://rawgit.com/BosNaufal/vue-loading-bar/master/index.html) 5 | 6 | [Need Vue 2 Version? Click Here...](https://github.com/BosNaufal/vue2-loading-bar) 7 | 8 | ## Intro 9 | Vue Loading Bar is a Youtube like loading bar component for Vue.Js. 10 | 11 | 12 | ## Features 13 | - full customizable 14 | - Already, Complete callback event 15 | - Included `.vue` file 16 | - well commented code 17 | - doesn't require any javascript libs, except [Vue.Js](http://vuejs.org) 18 | 19 | ## Install 20 | Include the [vue-loading-bar.js](./vue-loading-bar.js) to your HTML or web page file, after [Vue.Js](http://vuejs.org). Look an example in [example.html](./example.html). And don't forget to include [vue-loading-bar.css](./vue-loading-bar.css) file when you use this way. 21 | 22 | Or 23 | 24 | You can import [vue-loading-bar.vue](./vue-loading-bar.vue) to your vue component file like [this](./vueku.js) and process it with your preprocessor. 25 | 26 | Now 27 | 28 | You can install it via NPM 29 | ```bash 30 | npm install vue-loading-bar 31 | ``` 32 | 33 | 34 | ## Import Module 35 | ```javascript 36 | import loadingBar from './vue-loading-bar.vue'; 37 | // Or 38 | var loadingBar = require('./vue-loading-bar.vue'); 39 | ``` 40 | 41 | ## Usage 42 | minimal: 43 | ```html 44 | 48 | 49 | ``` 50 | Full Example: 51 | ```html 52 | 58 | 59 | ``` 60 | 61 | ## Props 62 | 63 | ##### `progress` (*) : The Percentage of loading-bar component. Integer value ( ex: 100 ). 64 | 65 | 66 | ##### `direction` : The Direction of loading-bar component. The default value is "right". 67 | 68 | 69 | ##### `error` : Boolean value to force error state of loading bar. 70 | 71 | 72 | ##### `class` : Component Class (optional) 73 | 74 | 75 | ##### `id` : Component Id (optional) 76 | 77 |
78 | 79 | ## Callback Events 80 | The [vue-loading-bar](https://github.com/BosNaufal/vue-loading-bar) component will dispatch some events such as, 81 | ```javascript 82 | ... 83 | events: { 84 | /** 85 | * Global Loading Callback Event 86 | * 87 | * @event-name loading-bar:{event-name} 88 | */ 89 | 90 | // Loading Bar on started 91 | 'loading-bar:started': function (){ 92 | console.log('started'); 93 | this.status = "started"; 94 | }, 95 | 96 | // Loading Bar on loading 97 | 'loading-bar:loading': function (){ 98 | console.log('loading'); 99 | this.status = "loading"; 100 | }, 101 | 102 | // Loading Bar on loaded 103 | 'loading-bar:loaded': function (){ 104 | console.log('loaded'); 105 | this.status = "loaded"; 106 | }, 107 | 108 | // Loading Bar on error 109 | 'loading-bar:error': function (){ 110 | console.log('error'); 111 | this.status = "error"; 112 | }, 113 | 114 | } 115 | ``` 116 | 117 | ## Thank You for Making this useful~ 118 | Hopefully this can be useful. 119 | 120 | ## Let's talk about some projects with me 121 | Just Contact Me At: 122 | - Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com) 123 | - Skype Id: bosnaufal254 124 | - twitter: [@BosNaufal](https://twitter.com/BosNaufal) 125 | 126 | ## License 127 | [MIT](http://opensource.org/licenses/MIT) 128 | Copyright (c) 2016 - forever Naufal Rabbani 129 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Loading Bar Component 6 | 7 | 42 | 43 | 44 | 45 | 46 |
47 |

Vue Loading Bar

48 |

Progress is {{ progress }}% {{ status }}

49 |
50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 | 58 | 59 | 60 | 61 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /vue-loading-bar.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 64 | 65 | 193 | --------------------------------------------------------------------------------