Youtube Like Loading Bar Component for Vue.js

Overview

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:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani

You might also like...
Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Progress bars and loading indicators for Vue.js
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

⏳ Loading inside a container or full screen for Vue.js
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js 👀 Document & Demo Page Docs & Live demo Fully feature live demo 💻 Install

👇 Vue button with slideout loading indicator
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

Full overlay loading with spinner for Vue
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner Just another collection of loading spinners with Vue.js Installation npm install --save vue-loading-spinner or yarn add vue-loadin

Comments
  • Unexpected token

    Unexpected token

    I'm using Browserify, when importing the component import LoadingBar from 'vue-loading-bar'; returns

    [21:29:26] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
    
    /Users/xxx/Sites/xxx/node_modules/vue-loading-bar/vue-loading-bar.vue:1
    <style>
    ^
    ParseError: Unexpected token
    
    opened by reefki 5
  • Listed as 'vue-autocomplete' in package.json

    Listed as 'vue-autocomplete' in package.json

    Not sure if you were gonna publish this in npm (you should!), but the package.json still says vue-autocomplete, which I'm guessing is leftover from your vue-autocomplete package.

    opened by haydenbbickerton 1
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
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Lucas Leandro 758 Sep 19, 2022
Radial progress bar component for Vue.js

vue-radial-progress A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient. Live Demo Re

Wyzant 464 Sep 5, 2022
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Sep 27, 2022
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

zhoulin 88 Aug 12, 2022
Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

TS Pro 35 Sep 23, 2022
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 2022
:panda_face: A simple,progress bar for Vue.js

svg-progress-bar A simple,progress bar for Vue.js ?? online demo | ?? simple demo | ?? Chinese Document Browser support IE Firefox Chrome Safari iOS A

sos 112 Sep 17, 2022