vue-loading-bar

1.0.0 • Public • Published

vue-loading-bar

Loading Bar Component for Vue.Js

DEMO

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.

import loading-bar from ./vue-loading-bar.vue
// Or
var loading-bar = 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

Package Sidebar

Install

npm i vue-loading-bar

Weekly Downloads

8

Version

1.0.0

License

MIT

Last publish

Collaborators

  • bosnaufal