@inotom/vue-svg-loading

SVG loading animation Vue.js component.

From v3.0.0, it works for Vue 3.

Demo

Demo

Install

Browser

<script src="vue.global.prod.js"></script>
<script src="vue-svg-loading.umd.js"></script>

npm

npm install --save @inotom/vue-svg-loading

Usage

Browser

<div id="app">
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</div>

<script src="vue.global.prod.js"></script>
<script src="vue-svg-loading.umd.js"></script>
<script>
const { createApp } = Vue;
const { SvgLoading, SvgSpinner } = SwsVueSvgLoading;

createApp({
  components: {
    SvgLoading,
    SvgSpinner,
  },
}).mount('#app');
</script>

SFC (TypeScript)

<script setup lang="ts">
import { SvgLoading, SvgSpinner } from '@inotom/vue-svg-loading';
</script>

<template>
  <svg-loading></svg-loading>
  <svg-spinner></svg-spinner>
</template>

Props

svg-loading

| name | type | defaults | description | |---------|----------|----------|--------------------------| | :size | Number | 50 | width/height pixel size | | fill | String | #666 | SVG fill color |

svg-spinner

| name | type | defaults | description | |----------|----------|----------|--------------------------------------| | size | number | 50 | width/height pixel size | | weight | number | 5 | SVG spinner circle weight pixel size | | fill | String | #666 | SVG spinner circle color |

License

MIT

Author

inotom