7 Best Loading/Progress Indicator Libraries For Vue.js (2022 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 04 2022

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. SVG Loading Spinners For Vue.js

SVG Loading Spinners For Vue.js

Demo Download

A simple component that allows to insert SVG based loading indicators/spinners to your Vue.js applications.


5. Vue.js Loading Element Component

Vue Loading Spinner Collection

Demo Download

A loading element component to display a loading indicator inside a container or the whole page.


6. 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.


7. Adpative Skeleton Loading Component For Vue.js

Adpative Skeleton Loading Component For Vue.js

Demo Download

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: