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
A loading component to create performant, highly customizable placeholder loading indicators, like Facebook cards loading.
2. vue-wait
vue-wait helps to manage multiple loading states on the page without any conflict.
3. vue-progressbar
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
A Vue component to easily create SVG based loading cards just you seen on Facebook.
5. Fullscreen Loading Indicator For Vue.js 2
Vue.js v2.x component for full-screen loading indicator.
6. Vue Loading Spinner Collection
Just another collection of loading spinners for Vue.js based web applications.
7. SVG Loading Spinners For Vue.js
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:
- 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries
- 80+ Best Pure CSS Loading Spinners For Front-end Developers
- 10 Best Progress Bar Components For Vue.js App