<div class="yo-loading"></div>
加载中...
<div class="yo-loading"> <div class="inner">加载中...</div> </div>
加载中...

假设你想要背景色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-loading(b,default,default,default,rgba(0,0,0,.5));

使用方法:

<div class="yo-loading yo-loading-b"> <div class="inner">加载中...</div> </div>

局部扩展方式:

.xxx{ @include yo-loading(b,default,default,default,rgba(0,0,0,.5)); }

使用方法:

<div class="xxx"> <div class="yo-loading yo-loading-b"> <div class="inner">加载中...</div> </div> </div>
加载中...

假设你想要改变loading颜色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-loading(c,default,#00afc7,default,rgba(0,0,0,.5));

使用方法:

<div class="yo-loading yo-loading-c"> <div class="inner">加载中...</div> </div>

局部扩展方式:

.xxx{ @include yo-loading(c,default,#00afc7,default,rgba(0,0,0,.5)); }

使用方法:

<div class="xxx"> <div class="yo-loading yo-loading-c"> <div class="inner">加载中...</div> </div> </div>
加载中...

假设你想要改变loading大小,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-loading(d,.7rem,#00afc7,default,rgba(0,0,0,.5));

使用方法:

<div class="yo-loading yo-loading-d"> <div class="inner">加载中...</div> </div>

局部扩展方式:

.xxx{ @include yo-loading(d,.7rem,#00afc7,default,rgba(0,0,0,.5)); }

使用方法:

<div class="xxx"> <div class="yo-loading yo-loading-d"> <div class="inner">加载中...</div> </div> </div>
@include yo-loading(
    $name:default, //{default | String} yo-loading名称
    $size:default, //{default | Length} yo-loading菊花大小
    $color:default, //{default | Color} yo-loading菊花颜色
    $mask-bgcolor:default, //{default | Color} yo-loading遮罩颜色
    $bgcolor:default //{default | Color} yo-loading背景颜色
)