原创Fomantic-UI加载器Loader(加载loading)使用讲解

前端设计/UI 418 0 2023-08-29

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


上一篇:fomantic-ui form表单的使用总结

下一篇:Fomantic-UI通知Toast的使用讲解

讨论数量:0

请先登录再发表讨论。 2024-05-21

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链