⏳ Loading inside a container or full screen for Vue.js

Overview

Buy Me A Coffee

NPM version NPM downloads License Build Status

vue-element-loading

Loading inside a container or full screen for Vue.js

👀 Document & Demo Page

💻 Install

npm install --save vue-element-loading

or

yarn add vue-element-loading

🖥 Install (Vue 3)

npm install --save [email protected]

or

🕹 Usage

import Vue from "vue";
import VueElementLoading from "vue-element-loading";

Vue.component("VueElementLoading", VueElementLoading);

or

import VueElementLoading from "vue-element-loading";

export default {
  components: {
    VueElementLoading
  }
};

🔎 Example

Inside container

<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" />
  <span>
    This is my content.
  </span>
</div>

Full screen

<body>
  <vue-element-loading :active="show" is-full-screen />
</body>

Adjust Spinner Color

Use the color parameter to set the color of the displayed spinner (does not affect custom spinner images).

<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
  />
  <span>
    This is my content.
  </span>
</div>

Set text

Use the text parameter to set the text which will appear below loader.

<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
    text="Please wait..."
  />
  <span>
    This is my content.
  </span>
</div>

Set text style

Use the textStyle parameter to set the style of text( you need to pass css-in-js way using camelCase exp. fontSize, backgroundColor etc).

<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
    text="Please textStyle={fontSize: '25px'}  wait..."
  />
  <span>
    This is my content.
  </span>
</div>

Adjust Spinner Size

Use the size parameter to set the size of the displayed spinner (does not affect custom spinner images).

<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" size="128" />
  <span>
    This is my content.
  </span>
</div>

Adjust Spinner Animation Speed

Use the duration parameter to set the animation loop duration in seconds (does not affect custom spinner images).

<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" duration="1.0" />
  <span>
    This is my content.
  </span>
</div>

Customize loader

<div class="parent">
  <vue-element-loading :active="show">
    <img src="/static/pikachu.gif" width="55px" height="55px" />
  </vue-element-loading>
</div>

🌀 Spinner

See full document here.

⚙️ Props

Props Type Default Description
active Boolean - Status for show/hide loading
spinner String spinner Spinner icon name: spinner, mini-spinner, ring, line-wave, line-scale, line-down, bar-fade, bar-fade-scale
color String #000 Color of spinner icon
background-color String rgba(255, 255, 255, .9) Background color of spinner icon (for overlay)
size String "40" The size to display the spinner in pixels (NOTE: this will not affect custom spinner images)
duration String "0.6" The duration of one 'loop' of the spinner animation, in seconds (NOTE: this will not affect custom spinner images)
delay Number | String 0 The minimum appearing duration of loading in seconds
is-full-screen Boolean false Loader will overlay the full page
text String - Text will appear below loader
text-style Object {} Change style of the text below loader

🤝 Contributing

  1. Fork this repository.
  2. Create new branch with feature name.
  3. Run npm install and npm run dev.
  4. Create your feature.
  5. Commit and set commit message with feature name.
  6. Push your code to your fork repository.
  7. Create pull request. 🙂

⭐️ Support

If you like this project, You can support me with starring this repository.

📄 License

MIT

Developed with ❤️ and ☕️

Comments
  • compatibility with Vue 3?

    compatibility with Vue 3?

    I was testing this with Vue 3 and adding

    import VueElementLoading from 'vue-element-loading'

    and

    <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#FF6700"/>

    in my component is giving all sorts of errors.

    Property "isActive" was accessed during render but is not defined on instance. 
    TypeError: selfHook.call is not a function
    Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
    

    and so on..

    Any fixes as Vue 3 is coming out soon..

    opened by maharzan 12
  • Not working in IE 11 - getting Script Syntax error

    Not working in IE 11 - getting Script Syntax error

    I am using weback to bundle my files and I get a console error SCRIPT1002: Syntax error. I don't understand where it comes from ... Does someone have an idea ?

    help wanted 
    opened by samteb 12
  • [Vue warn]: Property or method

    [Vue warn]: Property or method "isActive" is not defined on the instance but referenced during render.

    I'm facing this error

    [Vue warn]: Property or method "isActive" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
    

    my code

    
    <template>
    	<div>
    		<vue-element-loading :active="isActive" :is-full-screen="true"/>
    	</div>
    </template>
    
    
    <script>
    import VueElementLoading from 'vue-element-loading';
        export default {
        	data() {
                return {
                    app_name: process.env.MIX_APP_NAME,
                }
            },
            components: {
                VueElementLoading
            }
        }
    </script>
    

    + How can I select the type of loader i want?

    any idea?

    opened by robertnicjoo 11
  • Integrate with axios

    Integrate with axios

    Using it this way:

      async created () {
        this.isActive = true
        await this.fetchData()
        this.isActive = false
      }
    

    fetchData() is axios.get request, so i want to display loader till axios request is complete. How can i accomplish?

    opened by avxkim 7
  • [Feature request] Loader delay

    [Feature request] Loader delay

    Sometime the same loading action can take from 0.01 second to 2 seconds. If the loading takes less than ~0.5 second user will only see a "blink". Is it possible to add delay which prevents from showing the loader if the "active" value will be set to true for less than X milliseconds?

    opened by secit-pl 5
  • Set default config

    Set default config

    Is there a way when using as a component to set default config so you dont have to put it in every place the loader is used?

    import Vue from 'vue'
    import VueElementLoading from 'vue-element-loading'
    
    const options = {
         spinner:"spinner",
         color:"#E91E63"
    }
    
    Vue.component('VueElementLoading', VueElementLoading)
    
    opened by movepixels 5
  • Parameterized Spinner Size and Spinner Animation Duration

    Parameterized Spinner Size and Spinner Animation Duration

    This so awesome and simple to use - thanks for making it and putting it out there for the rest of use to use.

    In the interests of "giving back", I had a use case where larger spinners were preferable (particularly for full screen overlays), and also found that slower animation speeds were preferable when the spinners were large, so...

    ...I made a couple of changes so that the size and animation loop duration can be specified (for the standard spinners), as well as the existing ability to adjust color etc.

    I've also updated the example code, and the README with details of usage.

    I'm reasonably new to Vue, so let me know if there is anything you'd like me to revisit.

    opened by adlaws 4
  • change Background Color

    change Background Color

    Hello, excellent app :+1: , I have a question, is it possible to change the color of the background, by means of a property in vue-element-loading, as well as a color is passed in the color property?

    Example:

    <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#FF6700" background="#1a1b1c"/>
    

    in the file: src/index.vue

    .velmld-overlay {
      background-color: rgba(255, 255, 255, .9);
    }
    

    Thanks!

    feature request 
    opened by diniremix 4
  • Arrow function not transpiled in vue-element-loading.min.js

    Arrow function not transpiled in vue-element-loading.min.js

    Thank you for this great plugin. However I get an error in IE 11 even in the latest version (1.1.2). The problem is in the vue-element-loading.min.js file since there is an arrow function used which is not supported by IE 11.

    opened by ChristophAnastasiades 3
  • Size is not taking effect

    Size is not taking effect

    Size is always 40px whatever value you pass its always the same

    <button @click="apply(props.row)" class="btn green-haze">
          <span v-if="!applying"><i class="fas fa-check"></i> Apply</span>
          <vue-element-loading :active="applying" size="25" spinner="ring" color="#ffffff"/>
    </button>
    
    opened by mhelaiwa 3
  • Minified version was not updated !

    Minified version was not updated !

    It was fixed recently but it seems not in minified version ! I got this error when using it with v1.1.

    [Vue warn]: Invalid default value for prop "textStyle": Props with type Object/Array must use a factory function to return the default value.
    
    found in
    
    ---> <VueElementLoading> at index.vue
           <AppButtonPrincipal> at src\components\ui\AppButtonPrincipal.vue
             <Index> at src\components\pages\OverviewPage\index.vue
               <TheDashboard> at src\components\layout\TheDashboard.vue
                 <App> at src\App.vue
                   <Root>
    
    opened by samteb 3
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.4 to 1.5.10

    Bump url-parse from 1.4.4 to 1.5.10

    Bumps url-parse from 1.4.4 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump follow-redirects from 1.6.1 to 1.14.8

    Bump follow-redirects from 1.6.1 to 1.14.8

    Bumps follow-redirects from 1.6.1 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ajv from 6.7.0 to 6.12.6

    Bump ajv from 6.7.0 to 6.12.6

    Bumps ajv from 6.7.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    v6.10.2

    Fix: the unknown keywords were ignored with the option strictKeywords: true (instead of failing compilation) in some sub-schemas (e.g. anyOf), when the sub-schema didn't have known keywords.

    v6.10.1

    Fix types Fix addSchema (#1001) Update dependencies

    v6.10.0

    Option strictDefaults to report ignored defaults (#957, @​not-an-aardvark) Option strictKeywords to report unknown keywords (#781)

    v6.9.0

    OpenAPI keyword nullable can be any boolean (and not only true). Custom keyword definition changes:

    • dependencies option in to require the presence of keywords in the same schema.

    ... (truncated)

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Pongsatorn
Create anythings with @vuejs 💚
Pongsatorn
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
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-ac-loader is a plugin for show a full screen loader on requests.

AC Loader (vue-ac-loader) vue-ac-loader is a plugin for show a full screen loader on requests.

miSkoMV 0 Jan 21, 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 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
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Pygmy Slow Loris 161 Jul 16, 2022
A collection of spinners inside reusable vue components

A vue js component library which contains multiple spinners from SpinKit . Vue components built by Adib Mohsin. Please take a look at the live example

Adib Mohsin 33 Feb 26, 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
👇 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
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 Sep 19, 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

Duoc Nguyen 637 Oct 5, 2022
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

TS Pro 35 Sep 23, 2022