Youtube Like Loading Bar Component for Vue.js
Switch branches/tags
Nothing to show
Clone or download
Latest commit e3e33a8 Oct 21, 2016
Permalink
Failed to load latest commit information.
LICENSE first commit Jan 29, 2016
README.md Announce Vue 2 Version Oct 21, 2016
build.js first commit Jan 29, 2016
example.html first commit Jan 29, 2016
gulpfile.js first commit Jan 29, 2016
index.html first commit Jan 29, 2016
package.json edit README Apr 11, 2016
vue-loading-bar.css first commit Jan 29, 2016
vue-loading-bar.js first commit Jan 29, 2016
vue-loading-bar.min.js first commit Jan 29, 2016
vue-loading-bar.vue first commit Jan 29, 2016
vueku.js first commit Jan 29, 2016

README.md

vue-loading-bar

Loading Bar Component for Vue.Js

DEMO

Need Vue 2 Version? Click Here...

Intro

Vue Loading Bar is a Youtube like loading bar component for Vue.Js.

Features

  • full customizable
  • Already, Complete callback event
  • Included .vue file
  • well commented code
  • doesn't require any javascript libs, except Vue.Js

Install

Include the vue-loading-bar.js to your HTML or web page file, after Vue.Js. Look an example in example.html. And don't forget to include vue-loading-bar.css file when you use this way.

Or

You can import vue-loading-bar.vue to your vue component file like this and process it with your preprocessor.

Now

You can install it via NPM

npm install vue-loading-bar

Import Module

import loadingBar from './vue-loading-bar.vue';
// Or
var loadingBar = require('./vue-loading-bar.vue');

Usage

minimal:

<loading-bar
	class="someClass"
	id="SomeId"
	:progress=10>
</loading-bar>

Full Example:

<loading-bar
	class="someClass"
	id="someId"
	:progress=10
	direction="left"
	error="true">
</loading-bar>

Props

progress (*) : The Percentage of loading-bar component. Integer value ( ex: 100 ).
direction : The Direction of loading-bar component. The default value is "right".
error : Boolean value to force error state of loading bar.
class : Component Class (optional)
id : Component Id (optional)

Callback Events

The vue-loading-bar component will dispatch some events such as,

...
events: {
	/**
	*	Global Loading Callback Event
	*
	*	@event-name loading-bar:{event-name}
	*/

	// Loading Bar on started
	'loading-bar:started': function (){
		console.log('started');
		this.status = "started";
	},

	// Loading Bar on loading
	'loading-bar:loading': function (){
		console.log('loading');
		this.status = "loading";
	},

	// Loading Bar on loaded
	'loading-bar:loaded': function (){
		console.log('loaded');
		this.status = "loaded";
	},

	// Loading Bar on error
	'loading-bar:error': function (){
		console.log('error');
		this.status = "error";
	},

}

Thank You for Making this useful~

Hopefully this can be useful.

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani