vue-image-spinner2 is simple javascript package made with vue js that allows you to use your own image for spinner or loading indicator.
yarn add vue-image-spinner2 or npm i vue-image-spinner2
import {Spinner} from 'vue-image-spinner2'
export default{
components:{
Spinner
}
}
<Spinner type="rotating" src="https://s.gravatar.com/avatar/dad090f47a794da4dd624eee6d301aba?size=100&default=retro"/>
<Spinner type="rotating" :src="require(`@/assets/logo.png`)"/>
props name | type | default | description |
---|---|---|---|
type | string | rotating | spinner type |
src | string (required) | none | your image location, you can use image url, or use js require |
top | string | 50% | margin top, you can use % or px |
overlay | string | 'rgba(255, 255, 255, 0.0)'(no overlay) | overlay color, use rgba for transparent overlay |
width | string | 50px | your image size |
- rotating
- linear-rotating
- scale-up
- breathing
- jumping