adlaws/vue-element-loading

⏳ 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

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