Simplest Youtube Like Loading Bar Component For Vue 2. http://bosnaufal.github.io/vue2-loading-bar/

Related tags

vue2-loading-bar
Overview

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

Issues
Owner
Naufal Rabbani
Either Web Developer Live In Indonesia Who Love to Write and Code. Do You have any open source project which you want me to work on? Just contact me soon!
Naufal Rabbani
一款 ins 风格的 Vue 进度条组件

vue-ins-progress-bar a vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 Demo Live Demo Install $ npm i vue-ins-progress-bar Usage main.j

meloalright 325 Oct 14, 2021
A simple, flexible progress bar for Vue.js

vue-simple-progress A simple, flexible progress bar for Vue.js vue-simple-progress is designed to be a lightweight Vue.js progress bar requiring minim

Dave Williams 79 Oct 3, 2021
Vuejs package, allow you to manage a loading state inside all component, and to display a progressbar

Laravel Component Loading by bubbleflat.com This package allows you to manage a loading state inside all component, and to display a progressbar (than

Valentin Vivies 17 Jul 17, 2021
[CSS GPU Animation] Simple progressbar for vuejs

vue-progressbar-component [CSS GPU Animation] Simple progressbar for vuejs Demo Demo here Install npm install vue-progressbar-component or yarn add vu

null 13 Aug 7, 2019
🖖ProgressBar for vue.js SVG/Vector based

????ProgressBar for vue.js SVG/Vector based

Lars M 47 Sep 14, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 90 Oct 12, 2021
Yet another top progress loading bar component for Vue.js.

vue-top-progress Yet another top progress loading bar component for Vue.js. Requirements Vue.js ^2.0.0 Installation $ npm install vue-top-progress Dem

wangjingchao 254 Oct 9, 2021
A simple Vue component that displays a Progress Bar with labels for each step

A simple Vue component that displays a Progress Bar with labels for each step

Sebastian Hiebl 33 Aug 17, 2021
Customizable progress bar at the top of the page that shows the scroll progress

vue-read-progress Vue.js plugin for scroll position with a progress bar indicator Demo https://ajerez.github.io/vue-read-progress/ Installation With n

Alberto Jerez 37 Oct 8, 2021
A zero configuration progress loading bar component for Vue.js

A zero configuration progress loading bar component for Vue.js. Just add a reference and it’s done. The component interact with every ajax requisition

Vanderlei Alves da Silva 25 Feb 14, 2020
Animated button for VueJS

Notify A simple button that displays progress. Compatible with Vue 2.x Inspired by the button animations displayed on https://tympanus.net/Development

Adam van Dongen 73 Aug 12, 2021
VueJS viable toasts with progressbar, high customizabillity, flexibility and lightweight!

VueJS viable toasts with progressbar, high customizabillity, flexibility and lightweight!

Daniel Dimitrov 1 Oct 6, 2021
Vue 3 Circle Progress - Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable

Highly customizable & lightweight circular progressbar component for Vue 3, built with SVG and extensively customizable

Delowar Hossain 6 Oct 8, 2021
Need a step indicator for your stepped progress in VUE? No problem, this package has got you covered.

Need a step indicator for your stepped progress in VUE? No problem, this package has got you covered. This is highly customizable so you can provide the theme and design you want.

null 8 Sep 17, 2021
easy circular progress component with counting effect 💫🏺🎡

easy-circular-progress Install npm install easy-circular-progress --save Quick Start <template> <div id="app"> <Progress value="16.88"> <

Vincent Guo 105 Oct 5, 2021
🤞🏻 Map Boolean As Floating Number, Simple And Functional

???? Map Boolean As Floating Number, Simple And Functional

刘鲲鹏 5 Oct 8, 2021
Progress bars is based on nprogress for Vue

nprogress Slim progress bars is based on nprogress for Ajax'y applications Installation $ npm install vue-nprogress --save Examples <template> <npro

null 180 Sep 21, 2021
Counter component inspired in Twitter with Vue

Vue Twitter Counter Counter component inspired in Twitter with Vue You can see examples in here Getting started Install Simple install it via npm (or

Lucas Leandro 34 Oct 5, 2021