7 Best Loading/Progress Indicator Libraries For Vue.js (2023 Update)

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

vue-content-loader

Demo Download

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

Fullscreen Loading Indicator For Vue.js 2

Demo Download

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


3. Vue Loading Spinner Collection

Vue Loading Spinner Collection

Demo Download

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


4. CSS Based Loading Indicators For Vue – spinkit

CSS Based Loading Indicators For Vue – spinkit

Demo Download

The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.


5. CSS Based Loading Indicators For Vue – spinkit

CSS Based Loading Indicators For Vue

Demo Download

The spinkit library provides a collection of pretty CSS based loading spinners for Vue.js applications.


6. Animated Preloader Component – Vue UI Loader

Vue UI Loader Loading Circles

Demo Download

A simple and configurable loader/preloader component animated with CSS3 transitions.


7. Loading Animation For Vue Apps – vue-preloader

vue-preloader

Demo Download

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: