Youtube Like Loading Bar Component For Vue 2

Youtube Like Loading Bar Component For Vue 2

The simplest Youtube Like slim top loading bar component for Vue 2.

Vue 2 Loading Bar

Simplest Youtube Like Loading Bar Component For Vue 2



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


You can install it via NPM

npm install vue2-loading-bar


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


In Your HTML:

  :error="error" >


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:


MIT Copyright (c) 2016 - forever Naufal Rabbani

Github Repository

Tags: #VueJs