vue2-loading-views

Installation

yarn add vue2-loading-views

As plugin

import Vue from "vue";

import loadView from 'vue2-loading-views';
Vue.use(loadView);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Usage

<template>
    <load-view 
        :loading="true"
        :progress-data="0" 
        :progress-width="450" 
        :text-size="16" 
        :loader-done="'載入完成'" 
        :loading-text="'載入中請稍後...'">
    </load-view>
</template>

Usage

The component accepts these props:

| Attribute | Type | Default | Description | | ---- | ---- | ---- | ---- | | loading | Boolean | true | 是否顯示 | | fullPage | Boolean | true | 是否全螢幕 | | progressData | Number | 0 | 載入的數據 | | progressWidth | String | 450px | loader的寬度，可自由改變寬度 | | loadingText | String | 載入中，請稍候... | 載入中的文字，可自由變換 | | loaderDone | String | 載入完成！ | 載入完成的文字，可自由變換 | | TextSize | Number | 16 | 文字的大小 | | loaderColor | String | #0379FB | loading icon 的顏色 | | doneColor | String | #0379FB | loading完成後icon的顏色 | | barColor | String | #0379FB | progress bar 的顏色 |