vue-element-loading

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

👀 Document & Demo Page

Docs & Live demo

💻 Install

npm install --save vue-element-loading

or

yarn add vue-element-loading

🕹 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>
  <vue-element-loading :active="show" spinner="bar-fade-scale" color="#FF6700"/>
  <span>
    This is my content.
  </span>
</div>

Full screen

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

Customize loader

<div>
  <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 | #ccc | Color of spinner icon | | is-full-screen | Boolean | false | Loader will overlay the full page |

🤝 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 ☕️