BosNaufal / vue-loading-bar

Youtube Like Loading Bar Component for Vue.js

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:

• Email: [e-mail]
• Skype Id: bosnaufal254
• twitter: @BosNaufal

License

MIT Copyright (c) 2016 - forever Naufal Rabbani