zLoading

Vue 2.x component for loading indicator, youtubeBar | google Circle. (support mobile)

Gif display

Install

npm install z-loading -S

Quick Start

import Vue from 'vue';
import zloading from 'z-loading';
import 'z-loading/dist/z-loading.css';
 
Vue.use(zloading);
 

For more information, please refer to Quick Start 快速开始 in documentation.

Browser Support

Modern browsers and Internet Explorer 10+.

Usage

As vue component

  <template>
    <button @click="clickHandle1">Start</button>
  </template>
 
  <script>
    export default {
      methods: {
        clickHandle1 () {
          this.$zLoading.open();
          setTimeout(() => {
            this.$zLoading.close();
          }, 3000);
        }
      }
    };
  </script>
 

  <template>
    <div v-zLoading="isLoading">
      <button @click="isLoading = true">Start</button>
    </div>
  </template>
 
  <script>
    export default {
      data () {
        return {
          isLoading: false
        };
      }
    };
  </script>
 

As not a vue component instance

  let timeout = 3000;
  window.ZLoading.open().close(timeout);