A collection of loading spinners with Vue.js 3. Based on Halogen by yuanyan.
| vue-spinner version | Vue version |
|---|---|
| 3.x | Vue 3.x |
| 1.0.4 | Vue 1.x / 2.x |
npm install vue-spinnerimport { PulseLoader } from 'vue-spinner'
import 'vue-spinner/style.css'<template>
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
</template>
<script setup>
import { ref } from 'vue'
import { PulseLoader } from 'vue-spinner'
import 'vue-spinner/style.css'
const loading = ref(true)
const color = ref('#5dc596')
const size = ref('15px')
</script>import { createApp } from 'vue'
import { PulseLoader } from 'vue-spinner'
import 'vue-spinner/style.css'
const app = createApp(App)
app.component('PulseLoader', PulseLoader)If you are upgrading existing code, these imports remain available:
import 'vue-spinner/dist/vue-spinner.css'
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'<script src="path/to/vue.global.js"></script>
<script src="path/to/vue-spinner.umd.js"></script>
<script>
const { PulseLoader, GridLoader } = VueSpinner
</script><pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
<grid-loader :loading="loading" :color="color" :size="size"></grid-loader>
<clip-loader :loading="loading" :color="color" :size="size"></clip-loader>
<rise-loader :loading="loading" :color="color" :size="size"></rise-loader>
<beat-loader :loading="loading" :color="color" :size="size"></beat-loader>
<sync-loader :loading="loading" :color="color" :size="size"></sync-loader>
<rotate-loader :loading="loading" :color="color" :size="size"></rotate-loader>
<fade-loader :loading="loading" :color="color" :height="height" :width="width"></fade-loader>
<pacman-loader :loading="loading" :color="color" :size="size"></pacman-loader>
<square-loader :loading="loading" :color="color" :size="size"></square-loader>
<scale-loader :loading="loading" :color="color" :height="height" :width="width"></scale-loader>
<skew-loader :loading="loading" :color="color" :size="size"></skew-loader>
<moon-loader :loading="loading" :color="color" :size="size"></moon-loader>
<ring-loader :loading="loading" :color="color" :size="size"></ring-loader>
<bounce-loader :loading="loading" :color="color" :size="size"></bounce-loader>
<dot-loader :loading="loading" :color="color" :size="size"></dot-loader>All spinners accept the following props (with defaults):
| Prop | Type | Default | Description |
|---|---|---|---|
loading |
Boolean | true |
Show/hide the spinner |
color |
String | '#5dc596' |
Spinner color |
size |
String | varies | Spinner size (most spinners) |
margin |
String | '2px' |
Margin between elements |
radius |
String | varies | Border radius |
Some spinners use height and width instead of size (e.g., FadeLoader, ScaleLoader).
npm install
npm run devnpm run buildOutput: dist/vue-spinner.es.js (ESM) + dist/vue-spinner.umd.js (UMD) + dist/vue-spinner.css
vue-spinner is licensed under The MIT License.