原创Fomantic-UI加载器Loader（加载loading）使用讲解

一般我们在加载数据时会有个转圈圈提醒，这让用户知道需要等待，体验更好些。

下面讲解下Fomantic-UI的加载效果：

第一种：绝对居中有遮罩的加载效果

代码如下：

 <div class="ui active dimmer">

   <div class="ui loader"></div>

 </div>

或带有文字加载效果，代码如下：

<div class="ui active dimmer">

   <div class="ui text loader">Loading</div>

 </div>

如想遮罩变透明加上样式：style="background-color: rgba(255, 255, 255, 0);"

第二种：绝对居中无遮罩的加载效果

代码：<div class="ui active loader"></div>或<div class="ui disabled loader"></div>

其中active为激活显示状态，disabled为禁用隐藏状态。

第三种：与内容一起加载效果（非绝对位置，无遮罩）

代码：<div class="ui active inline loader"></div>或<div class="ui active centered inline loader"></div>

其它参数说明：

1、遮罩背景颜色明暗可设置值：默认、inverted、medium、light、very light

2、速度可设置值：默认、slow、fast

3、颜色可设置值：默认、primary、secondary、red、orange、yellow、olive、green、teal、blue、violet、purple、pink、brown、grey、black

4、大小可设置值：默认、mini、tiny、small、medium、large、big、huge、massive

5、形状可设置值：默认、double、elastic