Full overlay loading with spinner for Vue

Overview

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

Live Demo

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...'
       }
   }
}
Comments
  • Fix spinner not showing on build and Live Demo

    Fix spinner not showing on build and Live Demo

    CSS Changelog:

    1. Change @-webkit-keyframes to @keyframes
    2. Add animation rules along with -webkit-animation for compatibility.

    Fixes: https://github.com/PygmySlowLoris/vue-full-loading/issues/11 Refs: https://github.com/vuejs/vue-cli/issues/977

    opened by AyushG3112 3
  • Loading circle animation not showing

    Loading circle animation not showing

    Hey guys

    i have a problem that i can also see in your live demo, the circle of loading is not showing for some reason, the weird thing about it is that in my local machine i can see it but when i upload it to the live server i cant see any circle animation just the label, just as your live demo

    opened by jloracudris 3
  • Overlay-class is not configurable

    Overlay-class is not configurable

    I am generally pretty happy with this library, thanks for sharing!

    Weirdly enough, however, there is no way to overwrite the class for the overlay. It's always white-overlay if the overlay-prop is set to true.
    This is an easy fix, but I would greatly appreciate it.

    Possible use cases:

    • In my application there's a lot of z-index-spamming already and I need to increase the z-index of .white-overlay.
    • Maybe one doesn't want to have a white overlay, but a black one?
    opened by SvenSchoene 3
  • Custom loader-class not working

    Custom loader-class not working

    When I replace the class in my code, the class name is replace but the properties of the new class is not showed. I had to put my new class in the global CSS file.

    opened by sergiochtf 2
  • hide the loading image and also the text

    hide the loading image and also the text

    hello guys, I have been trying to modify the properties, at the time of loading, I mean in the mounted () event of the vue js I want the load to appear, but the image is deformed. How could I hide the loading image and the text. The reason is that at the time of loading I would like to hide the image and text "loading...", but for when I save it, show the loading image and the text.

    any ideas?

    opened by rsamillan2012 0
  • RawGit is shutting down, replace it with jsDelivr

    RawGit is shutting down, replace it with jsDelivr

    RawGit is shutting down. This PR replaces all RawGit links with the recommended alternative - jsDelivr. jsDelivr is a free and fast open source CDN hosting all files from GitHub and npm.

    This is an automated PR which is meant to make the migration process as easy as possible. If something doesn't look right or you have any questions, feel free to ping MartinKolarik or jimaek in this PR. You may also use our online migration tool to convert other RawGit links to jsDelivr links.

    opened by jsdelivrbot 0
  • Provide Cancel ui element + event

    Provide Cancel ui element + event

    Would it be possible to (optionally) display a cross in the right upper corner that would trigger an onCancel event?

    Use case:

    • User clicks Cancel button/cross
    • onCancel event is invoked
    • Spinner is hidden, overlay stays intact
    • Display 'Are you sure? 'Dialog
    • If user presses 'Yes', full loading is hidden
    • If user presses 'No', spinner reappears and continues spinning away
    opened by batje 2
  • Major styling issues

    Major styling issues

    It seems that you must be relying on a lot of default styles that aren't explicitly defined. See below:

    image

    Specifically the wrapper background and overflow needs to be adjusted to get the spinner to look remotely acceptable.

    <style scoped>
        .white-overlay >>> .loader-wrapper .wrapper {
            background-color: transparent;
            overflow:         visible;
        }
    </style>
    
    opened by hackel 1
Releases(1.2.1)
Owner
Pygmy Slow Loris
Coded slow but effective.
Pygmy Slow Loris
A simple, flexible spinner for Vue.js

vue-simple-spinner A simple, flexible spinner for Vue.js vue-simple-spinner is designed to be a lightweight Vue.js spinner requiring minimal configura

Dave Williams 416 Sep 19, 2022
🚗 A 3D product spinner for Vue.js with no dependencies

The product spinner that Vue.js was missing. Sponsors Become a sponsor Live Demo Try it on CodeSandbox! Installation npm npm i vue-product-spinner yar

Michele Riva 91 Oct 1, 2022
A spinner component library for Vue.js

A spinner component library for Vue.js

Amit Khonde 0 Aug 27, 2019
A pure Vue component submit button with a Ladda-style spinner

vue-submit A pure Vue component submit button with a Ladda-style spinner. Based on NxtChg/pieces vue-submit but with a different approach, using vue-c

null 1 Apr 18, 2019
A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

Christopher Gomez 0 Jul 16, 2019
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Sep 29, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Sep 27, 2022
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js ?? Document & Demo Page Docs & Live demo Fully feature live demo ?? Install

Pongsatorn 312 Sep 4, 2022
Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

Aleksei Iatsiuk 13 Jun 9, 2022
A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

iCanJS 8 Apr 30, 2021
Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Heath Yang 14 Dec 17, 2020
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

Guillaume Chau 403 Sep 20, 2022
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Jeff 57 Apr 6, 2022
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

zhoulin 88 Aug 12, 2022
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

William Lindvall 39 Jun 29, 2022
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Naufal Rabbani 140 Nov 28, 2021