Vuejs-Vue2 loading bar: vue2-loading-bar - Simplest Youtube Like Loading Bar Component For Vue 2.

Vue 2 Loading Bar

Simplest Youtube Like Loading Bar Component For Vue 2

DEMO

Install

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

or

You can install it via NPM

npm install vue2-loading-bar

or

just include vue2-loading-bar.min.js to your view like this

Usage

In Your HTML:

<loading-bar
  id="loading-bar-id"
  custom-class="custom-class"
  :on-error-done="errorDone"
  :on-progress-done="progressDone"
  :progress="progress"
  :direction="direction"
  :error="error" >
</loading-bar>

Props

id (String)

custom Id in vue2-loading-bar component

customClass (String)

custom className in vue2-loading-bar component

progress (Number)

The Progress Percentage of vue2-loading-bar component

direction (String)

The Animation Direction of vue2-loading-bar component. You can fill it with 'right' or 'left' default is 'right'

error (Boolean)

Indicate the component to showing the error state.

onErrorDone (Function, required)

Should change the parent state when the loading-bar has finished with its error state

onProgressDone (Function, required)

Should netralize the parent's progress state to be 0

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani

Comments

  • Enhancement: remove src/js demo related code
    Enhancement: remove src/js demo related code

    Jan 7, 2017

    In src/js there's some code that was (?) used for demo page but not anymore, possibly, would be better to clean it up

    Reply
  • Feature request: add .npmignore
    Feature request: add .npmignore

    Jan 7, 2017

    Adding .npmignore w/ exclusion of some library unrelated files for saving bandwidth / focusing on what's important for end npm user might be a good thing

    Reply
  • Adding a custom class prevents the bar showing red in error mode
    Adding a custom class prevents the bar showing red in error mode

    Sep 25, 2017

    I added a custom class to the HTML:

    <loading-bar
        custom-class="custom-class"
        ...
    

    Then set the error mode in the JS:

    this.error = true;
    

    The loading bar appears, but in green not red. Without the custom class there is no issue.

    Reply
  • How to make it work in vue router
    How to make it work in vue router

    Jul 20, 2018

    Hello @BosNaufal I just use this plugin, and it's work well in page load, but How to make it in vue router? Thanks :)

    Reply
  • Change id of container element to avoid ios issue with demo page
    Change id of container element to avoid ios issue with demo page

    Jan 7, 2017

    Fixes #1. Issue was error SyntaxError: Can't create duplicate variable that shadows a global property: 'app' originating from https://html.spec.whatwg.org/#named-access-on-the-window-object ios 10 screenshot after (previously was exactly in #1) image

    Reply
  • Not working on iOS
    Not working on iOS

    Nov 23, 2016

    img_0218

    Reply
  • Demo doesn't work on safari
    Demo doesn't work on safari

    Jan 12, 2017

    The demo website isn't working on Safari Version 10.0.1 (10602.2.14.0.7).

    screenshot 2017-01-12 02 06 56

    Looks great on chrome though!

    Reply