PygmySlowLoris / Vue Full Loading
Licence: mit
Full overlay loading with spinner for Vue
Stars: ✭ 148
Projects that are alternatives of or similar to Vue Full Loading
Vue Element Loading
⏳ Loading inside a container or full screen for Vue.js
Stars: ✭ 234 (+58.11%)
Mutual labels: loading, spinner, vuejs2
Vue Loading Overlay
Vue.js component for full screen loading indicator 🌀
Stars: ✭ 784 (+429.73%)
Mutual labels: loading, spinner, overlay
busy-load
A flexible loading-mask jQuery-plugin
Stars: ✭ 76 (-48.65%)
Mutual labels: overlay, spinner, loading
React Native Loading Spinner Overlay
💈 React Native loading spinner overlay
Stars: ✭ 1,369 (+825%)
Mutual labels: loading, spinner, overlay
plain-overlay
The simple library for customizable overlay which covers a page, elements or iframe-windows.
Stars: ✭ 28 (-81.08%)
Mutual labels: overlay, loading
awesome-web-styling
Awesome Web Styling with CSS Animation Effects ⭐️
Stars: ✭ 109 (-26.35%)
Mutual labels: spinner, loading
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (+148.65%)
Mutual labels: loading, spinner
React Circle
Renders a svg circle + progress, it just works 💘
Stars: ✭ 925 (+525%)
Mutual labels: loading, spinner
loading-indicator
🚦 Simple and customizable command line loading indicator
Stars: ✭ 18 (-87.84%)
Mutual labels: spinner, loading
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+422.97%)
Mutual labels: loading, spinner
Angular Loading Feedback
Angular directive to indicate loads in app
Stars: ✭ 8 (-94.59%)
Mutual labels: loading, spinner
cpp-indicators
A very simple, easy-to-use, and single-header-only C++ library for console based indicators (loading spinners)
Stars: ✭ 13 (-91.22%)
Mutual labels: spinner, loading
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-68.24%)
Mutual labels: loading, vuejs2
Vue Progress Path
Progress bars and loading indicators for Vue.js
Stars: ✭ 309 (+108.78%)
Mutual labels: spinner, vuejs2
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-25%)
Mutual labels: spinner, loading
Css Spinner
small, elegant pure css spinner for ajax or loading animation
Stars: ✭ 1,013 (+584.46%)
Mutual labels: loading, spinner
ZXLoadingView
🍕ZXLoadingView is an iOS progress-activity
Stars: ✭ 14 (-90.54%)
Mutual labels: spinner, loading
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-85.81%)
Mutual labels: spinner, loading
Spinners
A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators
Stars: ✭ 33 (-77.7%)
Mutual labels: loading, spinner
Vue Full Loading
Full overlay with spinner for Vue.
Perfect for performing a task in the background avoiding any other action on the screen. Can be easily handled by your central event bus
Installation
npm install vue-full-loading --save
Properties
Properties | Type | Values |
---|---|---|
label |
String | Default 'Loading...' |
show |
Boolean |
Default false Options: true or false. |
overlay |
Boolean |
Default true Options: true or false. |
overlay-class |
String | Default 'white-overlay' |
loader-class |
String | Default 'loader-wrapper' |
event-bus |
Object |
Default null Central event Bus |
event-show |
String | Default 'show-full-loading' |
event-hide |
String | Default 'hide-full-loading' |
Slots
Want to add your own loading content/style? No problem, you can use the available slots to do so.
Available slots:
-
loading-container
- This is the container for the loading text/spinner -
loading-text
- Only for the loading text -
loading-spinner
- Only for the spinner
Examples
Include the component in your .vue
file.
<template>
<loading
:show="show"
:label="label">
</loading>
</template>
You also can manage this component by your eventBus with custom event names.
<template>
<loading
:event-bus="myEventBus"
event-show="show-my-full-loading"
event-hide="hide-my-full-loading"
:label="label">
</loading>
</template>
Notice that if no event names passed it will use the default ones.
Match your data with your components props.
import loading from 'vue-full-loading'
export default {
components: {
loading
},
data(){
return {
show: false,
label: 'Loading...'
}
}
}
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].