muse-ui-loading

Muse-UI-Loading

Muse-UI plugin loading

Installation

npm install -S muse-ui-loading
// or
yarn add muse-ui-loading

CDN

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

Usage

import 'muse-ui-loading/dist/muse-ui-loading.css'; // load css
import Vue from 'vue';
import MuseUILoading from 'muse-ui-loading';
Vue.use(MuseUILoading);

new Vue({
  methods: {
    loading () {
      const loading = this.$loading({
        // ...options
      });
      setTimeout(() => {
        loading.close();
      }, 3000)
    }
  }
});

// or
const loading = MuseUILoading({
  // ...options
});
setTimeout(() => {
  loading.close();
}, 3000)

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

<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

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

config (config