muse-ui-loading v0.2.0

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 cantstatic`;

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)

Change default config, Will return new config.

Loading (options)

Show loading , Will return object ({ instance, close }).

Options

v-loading

v-loading="true"

• data-mu-loading-overlay-color
• data-mu-loading-color
• data-mu-loading-size
• data-mu-loading-text
• data-mu-loading-class

Dependencies Muse-UI

• mu-circle-progress
• mu-fade-transition
• muse-ui/lib/internal/mixins/color
• muse-ui/lib/internal/mixins/popup/utils

Licence

muse-ui is open source and released under the MIT Licence.

Copyright (c) 2018 myron