Awesome

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.

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)

<br/>

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:

Email: bosnaufalemail@gmail.com
Skype Id: bosnaufal254
twitter: @BosNaufal