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 的顏色