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 Feb 19 2024
1. Fullscreen Loading Indicator For Vue.js 3/2
Vue.js v2.x component for full-screen loading indicator.
2. CSS Based Loading Indicators For Vue – spinkit
The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.
3. Fullpage Loading Screen With Custom Spinner – Vue-loading
Yet another loading indicator library for Vue that displays a fullscreen loading screen with a custom spinner when content is being loaded in your app.
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. Vue.js Loading Element Component
A loading element component to display a loading indicator inside a container or the whole page.
6. vue-content-loader
A Vue component for animated loading skeleton screens, aiming to replace usual loading components and deliver better experiences for users.
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