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 22 2023
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. CSS Based Loading Indicators For Vue – spinkit
The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.
5. CSS Based Loading Indicators For Vue – spinkit
The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.
6. Animated Preloader Component – Vue UI Loader
A simple and configurable loader/preloader component animated with CSS3 transitions.
7. Loading Animation For Vue Apps – vue-preloader
A preloader component that adds a configurable loading animation to your Vue 3 application.
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