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

Overview

vue-loading-wrapper

showcase

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

🎥 Demo

Install

npm i vue-loading-wrapper
import LoadingWrapper from "vue-loading-wrapper";

export default {
  name: "LoadingWrapper",
  components: {
    LoadingWrapper,
  },
};

Usage

Some dynamic content loaded">
<loading-wrapper :loading="isLoading">Some dynamic content loadedloading-wrapper>

Props

Prop Type Required Default Description
loading Boolean false false Toggle animation
pulse Boolean false false Toggle progress pulse animation
text String false "Loading" Text label
tag String false "div" Root HTML element tag
baseClass String false "loading-wrapper" Base CSS class
contentClass String false "" Content CSS class

Slots

Name Description
None (default) Content that being displayed once loading flag is removed
You might also like...
Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

Progress bars and loading indicators for Vue.js
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

BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.
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

⏳ Loading inside a container or full screen for Vue.js
⏳ 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

👇 Vue button with slideout loading indicator
👇 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

Full overlay loading with spinner for Vue
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

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

Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner Just another collection of loading spinners with Vue.js Installation npm install --save vue-loading-spinner or yarn add vue-loadin

Owner
(づ。◕‿‿◕。)づ ᴄᴏᴅᴇ
null
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
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 5 Oct 20, 2022
A VueJS plugin for loading external JS/CSS inside VueJS environment

External Files Head Loader A VueJS plugin for loading external JS/CSS inside VueJS environment. I created this since some of my projects need to load

KarinP 0 Jun 16, 2020
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 2022
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 108 Sep 28, 2022
💫 A collection of loading spinner components for Vuejs

Vue Spinners A Vue.js port of react-spinners. ?? Installation npm install --save @saeris/vue-spinners # or yarn add @saeris/vue-spinners ?? Usage Ther

Drake Costa 310 Oct 25, 2022
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 Nov 14, 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 87 Nov 19, 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 141 Oct 19, 2022
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Lucas Leandro 758 Nov 14, 2022