加载

加载层,默认 3 秒自动关闭

样式

默认

  • Preview
  • Code
<div class="bny-load"></div>
<div class="bny-load" color="green"></div>
<div class="bny-load" color="red"></div>
<div class="bny-load" color="yellow"></div>
<div class="bny-load" color="blue"></div>

大小

  • Preview
  • Code
<div class="bny-load" size="small"></div>
<div class="bny-load"></div>
<div class="bny-load" size="large"></div>

样式-球

默认

  • Preview
  • Code
<div class="bny-load-ball">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball" color="green">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball" color="red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball" color="yellow">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball" color="blue">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

大小

  • Preview
  • Code
<div class="bny-load-ball" size="small">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="bny-load-ball" size="large">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

样式-转球

  • Preview
  • Code
<div class="bny-load-rot"></div>

样式-血条

  • Preview
  • Code




<div class="bny-load-health">
    <div></div>
</div>
<div class="bny-load-health" color="green">
    <div></div>
</div>
<div class="bny-load-health" color="yellow">
    <div></div>
</div>
<div class="bny-load-health" color="red">
    <div></div>
</div>
<div class="bny-load-health" color="blue">
    <div></div>
</div>

组件

  • Preview
  • Code




<div class="bny-card" style="width: 150px; height: 50px;" hx-get="/test/data/load.html" hx-trigger="load delay:1s">
    <div class="bny-load"></div>
</div>
<br>
<div class="bny-card" style="width: 150px; height: 50px;" hx-get="/test/data/load.html" hx-trigger="load delay:2s">
    <div class="bny-load-ball" color="red">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<br>
<div class="bny-card" style="width: 150px; height: 50px;" hx-get="/test/data/load.html" hx-trigger="load delay:3s">
    <div class="bny-load-rot"></div>
</div>
<br>
<button class="bny-btn" onclick="load()">弹出加载</button>
<script>
    function load() {
        const load = bny.load() // 弹出加载
        setTimeout(() => {
            load.remove() // 移除加载
        }, 3000)
    }
</script>

API

bny.load(style, options)

参数默认值说明
style00-旋转 / 1-圆形 / 2-弹跳 / 3-血条
options.color—green / yellow / red / blue
options.size—small / large

CSS 类

类名说明
bny-load-shade全屏遮罩层
bny-load旋转加载器，支持 color / size 属性
bny-load-ball弹跳点加载器
bny-load-rot双球旋转加载器
bny-load-health进度条式加载器