BETA
Sort by:
Buy us a coffeePsst! Honestly, We have NO idea how much to ask, but a cup of Coffee would be nice!

vue-element-loading

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


268
16
16 days ago
2737
GitHub

Buy Me A Coffee

NPM version NPM downloads License Build Status

vue-element-loading

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

p� Document & Demo Page

p; Install

npm install --save vue-element-loading

or

yarn add vue-element-loading

p% Install (Vue 3)

npm install --save vue-element-loading@next

or

yarn add vue-element-loading@next

p9 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
  }
};

p 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>

p � Spinner

See full document here.

bo8 Props

PropsTypeDefaultDescription
activeBoolean-Status for show/hide loading
spinnerStringspinnerSpinner icon name: spinner, mini-spinner, ring, line-wave, line-scale, line-down, bar-fade, bar-fade-scale
colorString#000Color of spinner icon
background-colorStringrgba(255, 255, 255, .9)Background color of spinner icon (for overlay)
sizeString"40"The size to display the spinner in pixels (NOTE: this will not affect custom spinner images)
durationString"0.6"The duration of one 'loop' of the spinner animation, in seconds (NOTE: this will not affect custom spinner images)
delayNumber | String0The minimum appearing duration of loading in seconds
is-full-screenBooleanfalseLoader will overlay the full page
textString-Text will appear below loader
text-styleObject{}Change style of the text below loader

p$ 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. p

b-o8 Support

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

p License

MIT

Developed with b$o8 and bo8