layui字体图标 loading图标静止不旋转

最新推荐文章于 2024-08-15 11:02:18 发布

poetry-code

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量2.9k

点赞数 3

分类专栏： layui 文章标签： layui loading

本文链接：https://blog.csdn.net/weixin_45237517/article/details/97277510

版权

layui 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

layui的字体图标库提供了丰富的字体图标，其中还有动态的loading图，但如果按照添加其他图标一样将class样式复制到按钮上，却发现loading图并不会旋转。

正确示例：

找到layui图片库中如下图所示的class样式。传送：layui文字图标库

在这里插入图片描述

除了加上上图所示的class样式外，还需加入下图所示的其他layui样式。加上之后，就能看到loading动画了。

<button type="button" class="layui-btn" id="">
	<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>loading
</button>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

poetry-code

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【layui】layui loading窗口的使用

德仔

03-24

3725

loading窗口的使用loading窗口的使用效果JS：函数ajax 调用 loading窗口的使用今天突然间想做一个用户数据同步的功能，同步过程中有个等待的时间，回调之后弹出回调数据，感觉不太友好。layui 有个loading的内置组件，参考别人的来试试！效果 JS：函数 function showloading(t) { if (t) {//如果是true则显示loading console.log(t);

layui字体图标 loading图标静止不旋转的解决方法

10-16

今天小编就为大家分享一篇layui字体图标 loading图标静止不旋转的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1 条评论您还未登录，请先登录后发表或查看评论

layui的layui-icon-loading为什么不动。

Quan的博客

11-25

1042

看文档给提交按钮加了一个加载中的loading 可是他竟然是静止的状态 <button type="button" class="layui-btn subeditor" > <i class="layui-icon layui-icon-loading" ></i> 提交 </button> 根本没有动啊。于是最后发现你必须再给他加class名是layui-anim layui-anim-rotate layui-anim-l...

【layui】layer弹出图片层（开启图片旋转放大缩小还原）

最新发布

Minions_Fatman的博客

08-15

1157

详细参照layui官网组件弹出图片层（开启图片旋转放大缩小还原）==是layui2.8.16+的新增功能，新增 photos 层的鼠标滚轮缩放功能 ==是layui2.8.16的新增功能，为了不影响我的layui-v2.4.5旧版本使用，我把这一部分单独拿出来写了layphoto.js。

layui图标不显示,动态图标不显示问题

u013931283的博客

01-08

1372

在项目中发现动态图标不显示问题可能是粗心大意导致,不小心出错,直接一键复制粘贴,图标就行了,比较不容易出错 1.情况一:引入的css不对,或被覆盖了,用下方地址看下 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" /> 2.图标用法有误,直接点击下方去复制代码,不容出错点击这前往,复制代码转载自:http://www.shagua.wiki

layui使用flow流加载数据.rar

03-20

通过使用第三方开放组件layui中的流加载，信息流加载和图片懒加载两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了。

layui里面的loading加载层自定义文字（两种方式）

苏木瑾

09-16

6191

方法一 //loading层 var index = layer.load(2, { //icon0-2 加载中,页面显示不同样式 shade: [0.4, '#000'], //0.4为透明度，#000 为颜色 content: '加载中...', success: function (layero) { layero.find('.layui-l...

关于layui的动态图标不显示的解决方法

10-16

layui的图标是通过`layui-icon`类来定义的，你可以结合layui提供的具体图标类名，如`layui-icon-loading`，来展示对应的图标。为了使图标动起来，我们可以添加layui封装的动画类，如`layui-anim`、`layui-anim-...

解决layui使用layui-icon出现默认图标的问题

10-16

在使用layui框架进行开发时，开发者可能会遇到一个问题，即在使用layui-icon来展示图标时，会出现默认的图标而不是预期的图标。这个问题看似简单，但实际上却困扰着许多开发者。原因在于开发者在将示例代码复制到...

layui设置请求加载旋转等待

admincg的博客

03-30

3702

layui请求旋转等待上图为layui旋转加载等待样式 // 调用上传方法 beforeSend: function () { i=showLoad(); }, // 上传等待 function showLoad() { ...

转载：html,将元素水平，垂直居中的四种方式

wangshixiu86的专栏

07-30

526

html,将元素水平，垂直居中的四种方式将元素垂直，水平居中分两种情况：一个是元素尺寸固定，二是元素尺寸不固定一.尺寸固定方法1：定位，50%，margin负距 .box{ width: 400px; height: 300px; border: 2px solid black; /* 把元素变成定位元素 */ position: absolute; /* 元素距离上，左都为50% */ left: 50%; top: 50%; /* 让元素的左外边距，上外边距为元素宽高...

layui 分页增加加载转圈特效

HandsomeGuy_的博客

11-29

1390

,done: function (res, curr, count) { $('.layui-laypage > a').on('click',function () { layer.load(2, { time: 0 ,shade: 0.3}) });//给分页按钮增加点击事件 l...

【教程】layui数据表格加载前添加loading图标

hifhf的专栏

04-11

3384

效果如下图：数据表格render前，添加loading图标varindex=layer.load(2);//添加loading,0-2三种方式其中，loading图标的样式有三种，分别如下图：为layui数据表格添加done，数据表格渲染完成后的回调，可参考官方文档：https://www.layui.com/doc/modules/table...

layui 加载loding图标

weixin_38171468的博客

06-30

1483

bProcessing：开启处理中的加载 sProcessing：页面加载数据显示具体信息 function getDataTable(){ $('#InsectDataTable').dataTable({ 'bProcessing': true,//是否显示,处理中.... 'bServerSide': true, 'fnServerParams': function (aoData) { var kaishi;

layui -- loading实现加载中效果

BlizzardWu的博客

05-24

5918

1、layer.msg layer.msg('Loading...', { icon: 16 , shade: 0.01 , time: 5000 }); 2、弹出遮罩层显示加载中 var loading = layer.load('Loading...', { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); setTimeout(function (data) { //最后数据加载完让 loading层消失 layer.close(loading);

layui加载数据显示loading 图标，加载完成loading消失