目 录CONTENT

文章目录

LayUI实现loading动画和居中显示

phyger
2022-03-28 / 0 评论 / 1 点赞 / 2,345 阅读 / 2,132 字 / 正在检测是否收录...

背景

近期在开发质量分析平台的时候,我选择使用对后端友好的LayUI框架,但是在使用layui-card的时候,发现向其中插入一个loading的图标,这个图标是在左上角的,我想要将其居中。同时这个图标layui-icon-loading是静止的,我希望它能够动起来。

解决办法

1、图标居中展示

居中展示有很多种方法,可以使用原生的css来实现,但是为了方便和可靠,我直接选择使用flex布局。

原始代码

<div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="bug-status-1" style="min-height:400px;"><i class="layui-icon layui-icon-loading></i></div>
                            </div>
                        </div>
                    </div>

原始效果

原始效果

居中样式

我们直接在html的head部分加上flex布局的代码

<head>
		<meta charset="utf-8">
		<title>缺陷分析</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/layui/css/layui.css" />
        <style>
            .mycenter {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
	</head>

以上,display指定flex布局,justify-content指定左右居中模式,align-items指定上下居中模式。上下左右同时居中就是我们想要的结果。

最终效果

最后我们给layui-card加上我们定义的class即可。

<div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="bug-status-1" style="min-height:400px;" class="mycenter"><i class="layui-icon layui-icon-loading"></i></div>
                            </div>
                        </div>
                    </div>

居中效果

2、图标动起来

想要让我们的图标动起来,我们就要用到LayUI的动画效果。动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可。其中 layui-anim是必须的,后面跟着的即是不同的动画类。

我们想要的动画就是这个loading图标360度旋转,并且一直循环,直到最后使用数据重新渲染layui-card。

循环转动动画

如上,我们只需要给我们的图标i标签增加如上两个class即可,别忘了 layui-anim是必须的。

<div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body">
                                <div id="bug-status-1" style="min-height:400px;" class="mycenter"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
                            </div>
                        </div>
                    </div>

刷新页面,你就可以看到loading的动画效果了。

1

评论区