@w07/loading v0.0.1

覆盖加载状态

npm i @w07/loading

<div class="box"></div>

import {WLoading} from "@w07/loading";
//svgTyp=>['cricle1','cricle2','cricle2','line1','line2','line3','line4','line5']
let wLoading = new WLoading({ domSelector: ".box", zIndex: 100, backgroundColor: "rgba(0,0,0,0.4)", svgTyp="line5",  svgSize = 2, svgColor = "#FF6700" });
wLoading.show();
wLoading.hide();

import {WLoading} from "@w07/loading";
//自定义加载图标
let wLoading = new WLoading({ domSelector: ".box", zIndex: 100, backgroundColor: "rgba(0,0,0,0.4)", imgSrc:"./assets/vue.svg",imgClass="box_img",imgStyle="width:60px;" });
wLoading.show();
wLoading.hide();

<div class="box">目标元素</div>

<div class="box_loading" style="display:none;">加载中...</div>

//自定义加载组件
import {WCustomLoading} from "@w07/loading";
let wLoading = new WCustomLoading({ domSelector: ".box", diaDomSelector:".box_loading" zIndex: 100 });
wLoading.show();
wLoading.hide();

import {WLoading} from "@w07/loading";
let wLoading = new WLoading();
wLoading.setLoadingDom(".box");
wLoading.show();
wLoading.hide();

//多异步加载状态
import {WLoading} from "@w07/loading";
let wLoading = new WLoading({ domSelector: ".box" });
wLoading.show();
setTimeout(() => {
  wLoading.hide();
}, 1000);
wLoading.show();
setTimeout(() => {
  wLoading.hide();
}, 1000);