MIUI加载时的等待图标#有趣的加载icon-1
原创
最近突发奇想，想用html+css来做一些加载图标，计划做成一个系列吧。这第一集，就从MIUI开始，先来复刻一下MIUI的加载时的icon。
一、原效果
MIUI原生加载icon
为了这个效果我可是把手机分身给删了~（希望大家看过可以点一个小小的赞）
二、实现效果
用HTML+CSS做出来的效果
三、源码
如果直接用的话，改:root选择器里面的值即可，有注释，调试一下就能得到自己想要的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Copyright" content="entireyu@jniantic.cn">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
/* 设置图形大小 */
--size: 64px;
/* 设置循环速度 */
--rate: 1.5s;
/* 环颜色 */
--main-color: #1d1d1f;
/* 背景音乐 */
--center-color: #ffffff;
}
/* 最低层元素 */
.mi-loading{
position: relative;
height: var(--size);
width: var(--size);
z-index: 1;
/* 旋转动画设置 */
animation: ani var(--rate) linear infinite;
}
/* 姑且叫做中层元素吧 */
.mi-loading::before{
height: calc(var(--size) - (var(--size) / 6));
width: calc(var(--size) - (var(--size) / 6));
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: var(--center-color);
border-radius: 50px;
z-index: 2;
}
/* 这个是最上层元素 */
.mi-loading::after{
height: calc(var(--size) / 4.5);
width: calc(var(--size) / 4.5);
top: calc(var(--size) / 6);
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.mi-loading::before, .mi-loading::after{
content: '';
position: absolute;
}
.mi-loading , .mi-loading::after{
background-color: var(--main-color);
border-radius: 50px;
}
/* 旋转的动画 */
@keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="mi-loading"></div>
</body>
</html>四、实现解析
相信各位大佬不用看源码都有思路了~
这边就说一下我自己的实现思路吧——三个圆解决。
首先先在最低层先画一个圆形，
然后再弄一个比第一个圆小的圆放在第一步的圆上面（注意：这个圆的颜色和整个网页的背景色应当是相同的，且这个圆的应当比第一个圆要小），
其次再弄一个小小圆放在前两个圆的上面，作为小圆点（自己把握大小的度，也可以参考我的来），
最后添加上动画旋转循环播放就好。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
