Muse-UI-Loading

Muse-UI plugin loading

Installation

1npm install -S muse-ui-loading
2// or
3yarn add muse-ui-loading

CDN

1<link rel="stylesheet" href="https://unpkg.com/muse-ui-loading/dist/muse-ui-loading.all.css"/>
2<script src="https://unpkg.com/muse-ui-loading/dist/muse-ui-loading.js"></script>

Usage

1import 'muse-ui-loading/dist/muse-ui-loading.css'; // load css
2import Vue from 'vue';
3import MuseUILoading from 'muse-ui-loading';
4Vue.use(MuseUILoading);
5
6new Vue({
7  methods: {
8    loading () {
9      const loading = this.$loading({
10        // ...options
11      });
12      setTimeout(() => {
13        loading.close();
14      }, 3000)
15    }
16  }
17});
18
19// or
20const loading = MuseUILoading({
21  // ...options
22});
23setTimeout(() => {
24  loading.close();
25}, 3000)

use v-loading in element, use data-mu-loading-* set option

1<div v-loading="true" data-mu-loading-overlay-color="rgba(0, 0, 0, .6)" style="position: relative; width: 500px; height: 400px;"></div>

element position is cant static`;

API

config

Vue.use(MuseUILoading, config) change default config

1{
2  overlayColor: 'hsla(0,0%,100%,.9)',        // overlay color
3  size: 48,                                  // circle progress size
4  color: 'primary',                           // color
5  className: ''                               // loading class name
6}

config (config