7 Best Loading/Progress Indicator Libraries For Vue.js

A loading/progress indicator provides an easy way to show the current loading status while data in a specific area or the whole document is loading.

This is a curated list of 7 best components and JavaScript libraries for Vue.js applications to create awesome loading & progress indicators during HTTP requests, routing change, or all you want. Enjoy.

1. vue-content-loader

vue-content-loader

Demo Download

A loading component to create performant, highly customizable placeholder loading indicators, like Facebook cards loading.


2. vue-wait

vue-wait

Demo Download

vue-wait helps to manage multiple loading states on the page without any conflict.


3. vue-progressbar

a-lightweight-progress-bar-for-vue

Demo Download

A lightweight yet customizable and versatile progress bar component for vue 2.x & Vue 1.x.

Features:

  • Custom color, thickness, location, etc.
  • Smooth transitions.
  • Allows you to stick the progress to the top or bottom of the screen.
  • Auto finish when reaching 100%.
  • Supports vue-route.

4. Facebook Style Loading Cards For Vue.js

Facebook Style Loading Cards For Vue.js

Demo Download

A Vue component to easily create SVG based loading cards just you seen on Facebook.


5. Fullscreen Loading Indicator For Vue.js 2

Fullscreen Loading Indicator For Vue.js 2

Demo Download

Vue.js v2.x component for full-screen loading indicator.


6. Vue Loading Spinner Collection

Vue Loading Spinner Collection

Demo Download

Just another collection of loading spinners for Vue.js based web applications.


7. SVG Loading Spinners For Vue.js

SVG Loading Spinners For Vue.js

Demo Download

A simple component that allows to insert SVG based loading indicators/spinners to your Vue.js applications.


More Resources:

You might not need a Vue.js component or UI library to create loading & progress indicates on your app. Here are a few resources which you can achieve it via Vanilla JavaScript or Pure CSS:

You Might Be Interested In: