Based on loaders.css
$ npm install -S vue-loaders
- umd: https://unpkg.com/vue-loaders/dist/vue-loaders.umd.js
- esm/mjs: https://unpkg.com/vue-loaders/dist/vue-loaders.esm.js
- umd:
https://unpkg.com/vue-loaders/dist/loaders/
loader name.js
Take a look at available names if you prefer <vue-loaders name="{loader name}">
syntax.
Take a look at available components list if you prefer <vue-loaders-{loader name}>
syntax.
For available props see props.
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
const template = `
<div>
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
<hr/>
<vue-loaders name="ball-beat" color="red" scale="1"></vue-loaders>
</div>
`;
new Vue({
template
}).$mount('#app');
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.use(VueLoadersBallBeat);
const template = `
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
`;
new Vue({
template
}).$mount('#app');
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.component('my-name', VueLoaders.component);
const template = `
<my-name name="ball-beat" color="red" scale="1"></my-name>
`;
new Vue({
template
}).$mount('#app');
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.component('my-name', VueLoadersBallBeat.component);
const template = `
<my-name color="red" scale="1"></my-name>
`;
new Vue({
template
}).$mount('#app');
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat.js';
const template = `
<vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat>
`;
new Vue({
components: {
[VueLoadersBallBeat.component.name]: VueLoadersBallBeat.component
},
template
}).$mount('#app');
If you want setting a loader color in your styles, see example below:
import Vue from 'vue/dist/vue.esm.browser';
import 'vue-loaders/dist/vue-loaders.css';
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
const template = `
<div style="color: red;">
<vue-loaders-ball-beat color="currentColor" scale="1"></vue-loaders-ball-beat>
</div>
`;
new Vue({
template
}).$mount('#app');
<!DOCTYPE html>
<html>
<head>
<title>VueLoaders demo</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-loaders/dist/vue-loaders.css">
<script src="https://unpkg.com/vue-loaders"></script>
</head>
<body>
<div id="app">
<vue-loaders-ball-beat color="red" scale="2"></vue-loaders-ball-beat>
<hr/>
<vue-loaders name="ball-beat" color="red" scale="2"></vue-loaders>
</div>
<script>
Vue.use(VueLoaders);
new Vue().$mount('#app');
</script>
</body>
</html>
ball-beat
ball-clip-rotate-multiple
ball-clip-rotate-pulse
ball-clip-rotate
ball-grid-beat
ball-grid-pulse
ball-pulse-rise
ball-pulse-sync
ball-pulse
ball-rotate
ball-scale-multiple
ball-scale-ripple-multiple
ball-scale-ripple
ball-scale
ball-spin-fade-loader
ball-triangle-path
ball-zig-zag-deflect
ball-zig-zag
cube-transition
line-scale-party
line-scale-pulse-out-rapid
line-scale-pulse-out
line-scale
line-spin-fade-loader
pacman
semi-circle-spin
square-spin
vue-loaders-ball-beat
vue-loaders-ball-clip-rotate-multiple
vue-loaders-ball-clip-rotate-pulse
vue-loaders-ball-clip-rotate
vue-loaders-ball-grid-beat
vue-loaders-ball-grid-pulse
vue-loaders-ball-pulse-rise
vue-loaders-ball-pulse-sync
vue-loaders-ball-pulse
vue-loaders-ball-rotate
vue-loaders-ball-scale-multiple
vue-loaders-ball-scale-ripple-multiple
vue-loaders-ball-scale-ripple
vue-loaders-ball-scale
vue-loaders-ball-spin-fade-loader
vue-loaders-ball-triangle-path
vue-loaders-ball-zig-zag-deflect
vue-loaders-ball-zig-zag
vue-loaders-cube-transition
vue-loaders-line-scale-party
vue-loaders-line-scale-pulse-out-rapid
vue-loaders-line-scale-pulse-out
vue-loaders-line-scale
vue-loaders-line-spin-fade-loader
vue-loaders-pacman
vue-loaders-semi-circle-spin
vue-loaders-square-spin
vue-loaders-triangle-skew-spin
vue-loaders
component support the following props:
name
- name of loader(see names).color
- loader color. May be any css color value.scale
- loader scale. May be any scale number
vue-loaders-{loader name}
components(see components) support the following props:
color
- loader color. May be any css color value.scale
- loader scale. May be any scale number
Examples:
<vue-loaders name="ball-beat" color="black" scale="1.2"></vue-loaders>
<vue-loaders-ball-beat color="black" scale="1"></vue-loaders-ball-beat>