Hokid / Vue Loaders
Licence: mit
Vue + loaders.css
Stars: ✭ 127
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Loaders
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+1371.65%)
Mutual labels: vue-components, loader, loading, progress, spinner
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-83.46%)
Mutual labels: progress, loader, spinner, loading
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (+84.25%)
Mutual labels: component, loader, loading, spinner
react-awesome-loaders
🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.
Stars: ✭ 146 (+14.96%)
Mutual labels: progress, css3, loader, spinner
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+509.45%)
Mutual labels: loader, loading, progress, spinner
Vue Loading Overlay
Vue.js component for full screen loading indicator 🌀
Stars: ✭ 784 (+517.32%)
Mutual labels: loader, loading, spinner, indicator
Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+100%)
Mutual labels: loader, loading, progress, spinner
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (+36.22%)
Mutual labels: component, loading, progress, spinner
Awloader
AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.
Stars: ✭ 11 (-91.34%)
Mutual labels: component, loader, loading, progress
Funnyloader
Loading indicator for android with over 200 random messages
Stars: ✭ 77 (-39.37%)
Mutual labels: loader, progress, indicator
loading-indicator
🚦 Simple and customizable command line loading indicator
Stars: ✭ 18 (-85.83%)
Mutual labels: spinner, loading, indicator
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (-40.16%)
Mutual labels: loader, spinner, loading
loading
Laravel package to add loading indicator to pages while page is loading.
Stars: ✭ 38 (-70.08%)
Mutual labels: loader, spinner, indicator
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-12.6%)
Mutual labels: progress, spinner, loading
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (+48.03%)
Mutual labels: plugin, component, vue-components
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (+4.72%)
Mutual labels: plugin, component, loader
Loading Bar
Flexible, light weighted and super fast Progress Bar Library
Stars: ✭ 300 (+136.22%)
Mutual labels: loader, loading, progress
Waitme
jquery plugin for easy creating loading css3/images animations
Stars: ✭ 302 (+137.8%)
Mutual labels: loader, loading, progress
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (+189.76%)
Mutual labels: loader, loading, spinner
React Circle
Renders a svg circle + progress, it just works 💘
Stars: ✭ 925 (+628.35%)
Mutual labels: loading, progress, spinner
vue loaders
loaders.css + vue
NPM
$ npm install -S vue-loaders
CDN
- 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
Usage
Before starting playing with loaders include some CSS to your bundle or page:
import 'vue-loaders/dist/vue-loaders.css';
for bundle
<link rel="stylesheet" href="https://unpkg.com/vue-loaders/dist/vue-loaders.css">
for page
It`s mandatory step. Without this CSS your loaders will not appears on page.
There are two ways how to use the library.
The first is to use main component vue-loaders.
<vue-loaders name="ball-beat"></vue-loaders>
name is name of loader. You will found all avaliable loaders names here.
To use this way you should import vue-loaders and add this as plugin:
import VueLoaders from 'vue-loaders';
// add plugin
Vue.use(VueLoaders);
or on page
<script src="https://unpkg.com/vue-loaders"></script>
<script>
Vue.use(VueLoaders);
</script>
The second is to use separet loader component.
<vue-loaders-ball-beat></vue-loaders-ball-beat>
You will found all avaliable loaders here.
Import separate loader component and then add this as plugin:
import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';
Vue.use(VueLoadersBallBeat);
This way is good for perfomance and bundle size.
...or import entier library just as for the fist way:
import VueLoaders from 'vue-loaders';
Vue.use(VueLoaders);
You can prefer first way or second or both of them. The main diffrent between them is when you use the second way you don`t need to include all loaders to your bundle.
Also check out props here or use IDE tips, this library provide web-types.
And some examples:
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 manage loader color from CSS outside follow this example:
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>
Loaders
| 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/> |
Props
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>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].