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 the 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.
Originally published Mar 19 2020, updated May 04 2022
1. vue-content-loader
A Vue component for animated loading skeleton screens, aiming to replace usual loading components and deliver better experiences for users.
2. Fullscreen Loading Indicator For Vue.js 2
Vue.js v2.x component for full-screen loading indicator.
3. Vue Loading Spinner Collection
Just another collection of loading spinners for Vue.js based web applications.
4. SVG Loading Spinners For Vue.js
A simple component that allows to insert SVG based loading indicators/spinners to your Vue.js applications.
5. Vue.js Loading Element Component
A loading element component to display a loading indicator inside a container or the whole page.
6. CSS Based Loading Indicators For Vue – spinkit
The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.
7. Adpative Skeleton Loading Component For Vue.js
A lightweight and themeable skeleton loader component that automatically adapts to your app content.
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