vue-loaders
Advanced tools
Vue component wrappers for loaders.css (https://github.com/ConnorAtherton/loaders.css)
$ npm install -S vue-loaders
https://unpkg.com/vue-loaders/dist/loaders/loader name.jsTake 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>
| Preview | Name | Component |
|---|---|---|
 | ball-beat | <vue-loaders-ball-beat/> |
 | ball-clip-rotate-multiple | <vue-loaders-ball-clip-rotate-multiple/> |
 | ball-clip-rotate-pulse | <vue-loaders-ball-clip-rotate-pulse/> |
 | ball-clip-rotate | <vue-loaders-ball-clip-rotate/> |
 | ball-grid-beat | <vue-loaders-ball-grid-beat/> |
 | ball-grid-pulse | <vue-loaders-ball-grid-pulse/> |
 | ball-pulse-rise | <vue-loaders-ball-pulse-rise/> |
 | ball-pulse-sync | <vue-loaders-ball-pulse-sync/> |
 | ball-pulse | <vue-loaders-ball-pulse/> |
 | ball-rotate | <vue-loaders-ball-rotate/> |
 | ball-scale-multiple | <vue-loaders-ball-scale-multiple/> |
 | ball-scale-ripple-multiple | <vue-loaders-ball-scale-ripple-multiple/> |
 | ball-scale-ripple | <vue-loaders-ball-scale-ripple/> |
 | ball-scale | <vue-loaders-ball-scale/> |
 | ball-spin-fade-loader | <vue-loaders-ball-spin-fade-loader/> |
 | ball-triangle-path | <vue-loaders-ball-triangle-path/> |
 | ball-zig-zag-deflect | <vue-loaders-ball-zig-zag-deflect/> |
 | ball-zig-zag | <vue-loaders-ball-zig-zag/> |
 | cube-transition | <vue-loaders-cube-transition/> |
 | line-scale-party | <vue-loaders-line-scale-party/> |
 | line-scale-pulse-out-rapid | <vue-loaders-line-scale-pulse-out-rapid/> |
 | line-scale-pulse-out | <vue-loaders-line-scale-pulse-out/> |
 | line-scale | <vue-loaders-line-scale/> |
 | line-spin-fade-loader | <vue-loaders-line-spin-fade-loader/> |
| pacman | <vue-loaders-pacman/> |
 | semi-circle-spin | <vue-loaders-semi-circle-spin/> |
 | square-spin | <vue-loaders-square-spin/> |
 | triangle-skew-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 numbervue-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 numberExamples:
<vue-loaders name="ball-beat" color="black" scale="1.2"></vue-loaders>
<vue-loaders-ball-beat color="black" scale="1"></vue-loaders-ball-beat>
FAQs
Vue component wrappers for loaders.css (https://github.com/ConnorAtherton/loaders.css)
The npm package vue-loaders receives a total of 875 weekly downloads. As such, vue-loaders popularity was classified as not popular.
We found that vue-loaders demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Ā It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.
Research
Security News
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.