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

Last update: Sep 1, 2020

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

GitHub

https://github.com/liutkin/vue-loading-wrapper
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

Aug 8, 2022

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

Aug 7, 2022

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

Apr 6, 2022

⏳ 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

Aug 9, 2022

👇 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

Jun 29, 2022

Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Jul 16, 2022

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

Aug 12, 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

Jun 9, 2022

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

Aug 17, 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.

Aug 3, 2020
Vue-loading - Vue Placeholder loading Content With Image,Table,Status
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

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

Jan 30, 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

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

An vuejs loading component ☄️

Jul 27, 2022
🌀 A collection of loading indicators animated with CSS for VueJS
🌀 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

Jan 21, 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

Jun 13, 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 #

Aug 17, 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

Jul 10, 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

Nov 28, 2021
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.

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

Jul 16, 2022