css实现多个loading动画效果

效果展示

在开发中，为了提高用户体验，通常在加载数据的时候会给一个loading提示，这里分享几个简单的loading加载效果
根据序号查看代码，尾部有整合代码Gitee链接

01

<div class="loading"></div>

.loading {width: 30px;height: 30px;border: 2px solid #1890ff;border-top-color: transparent;border-radius: 50%;animation: rotate 0.75s linear infinite;
}@keyframes rotate {to {transform: rotate(360deg);}
}

02

<div class="loading"></div>

.loading {width: 30px;height: 30px;border: 2px solid #1890ff;border-bottom: 2px solid rgba(24, 144, 255, 0.2);border-left: 2px solid rgba(24, 144, 255, 0.2);border-right: 2px solid rgba(24, 144, 255, 0.2);border-radius: 50%;animation: rotate 0.75s linear infinite;
}@keyframes rotate {to {transform: rotate(360deg);}
}

03

<div class="loading"><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(3, 1fr);justify-items: center;column-gap: 8px;
}.loading div {width: 10px;height: 10px;background-color: #1890ff;border-radius: 50%;animation: jump 0.6s alternate infinite;
}.loading div:nth-child(2) {animation-delay: 0.2s;
}.loading div:nth-child(3) {animation-delay: 0.4s;
}@keyframes jump {to {opacity: 0.1;transform: translateY(-16px);}
}

04

<div class="loading"><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(3, 1fr);justify-items: center;column-gap: 10px;
}.loading div {width: 10px;height: 10px;background-color: #1890ff;border-radius: 50%;animation: wq_scale 0.6s alternate infinite;
}.loading div:nth-child(2) {animation-delay: 0.2s;
}.loading div:nth-child(3) {animation-delay: 0.4s;
}@keyframes wq_scale {from {opacity: 0.1;transform: scale(0.1);}to {opacity: 1;transform: scale(1);}
}

05

<div class="loading"><div></div><div></div><div></div><div></div>
</div>

.loading {width: 40px;height: 40px;display: grid;grid-template-columns: repeat(2, 1fr);justify-items: center;align-items: center;animation: rotate 1.3s linear infinite;
}.loading div {width: 14px;height: 14px;border-radius: 50%;background-color: #1890ff;
}.loading div:nth-child(2) {opacity: 0.8;
}.loading div:nth-child(3) {opacity: 0.6;
}.loading div:nth-child(4) {opacity: 0.4;
}@keyframes rotate {to {transform: rotate(360deg);}
}

06

<div class="loading"><div></div><div></div><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(5, 1fr);justify-items: center;column-gap: 5px;
}.loading div {width: 5px;height: 15px;background-color: #1890ff;animation: wq_scaleY 1.2s ease-in-out infinite;
}.loading div:nth-child(2) {animation-delay: 0.1s;
}.loading div:nth-child(3) {animation-delay: 0.2s;
}.loading div:nth-child(4) {animation-delay: 0.3s;
}.loading div:nth-child(5) {animation-delay: 0.4s;
}@keyframes wq_scaleY {0%,40%,100% {transform: scaleY(1);}20% {transform: scaleY(2.5);}
}

07

<div class="loading"><div></div><div></div><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(5, 1fr);justify-items: center;column-gap: 5px;height: 30px;overflow-y: hidden;
}.loading div {width: 5px;height: 50px;background-color: #1890ff;animation: wq_translateY 1s ease-in-out infinite;
}.loading div:nth-child(2) {animation-delay: 0.1s;
}.loading div:nth-child(3) {animation-delay: 0.2s;
}.loading div:nth-child(4) {animation-delay: 0.3s;
}.loading div:nth-child(5) {animation-delay: 0.4s;
}@keyframes wq_translateY {0%,40%,100% {transform: translateY(20px);}20% {transform: translateY(0);}
}

08

<div class="loading"><div></div><div></div><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(5, 15px);
}.loading div {width: 10px;height: 10px;background-color: rgba(24, 144, 255, .5);position: relative;
}.loading div:nth-child(1)::before {content: "";width: 10px;height: 10px;background-color: #1890ff;z-index: 1;position: absolute;left: 0;top: 0;animation: wq_step 1s steps(5, end) infinite;
}@keyframes wq_step {to {transform: translateX(75px);}
}

09

<div class="loading"><div></div><div></div><div></div><div></div><div></div>
</div>

.loading {display: grid;grid-template-columns: repeat(5, 15px);
}
.loading div {width: 10px;height: 10px;border-radius: 50%;background: #1890ff;animation: wq_load 1s ease infinite;
}.loading div:nth-child(1) {animation-delay: 0.2s;
}
.loading div:nth-child(2) {animation-delay: 0.4s;
}
.loading div:nth-child(3) {animation-delay: 0.6s;
}
.loading div:nth-child(4) {animation-delay: 0.8s;
}
.loading div:nth-child(5) {animation-delay: 1s;
}@keyframes wq_load {0% {opacity: 1;transform: scale(1.3);}100% {opacity: 0.2;transform: scale(0.3);}
}

10

<div class="loading"><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

.loading {width: 50px;height: 50px;border-radius: 50%;position: relative;
}.loading .item {width: 100%;height: 100%;border-radius: 50%;position: absolute;
}.loading .item:nth-child(1) {border-bottom: 7px solid #1890ff;transform: rotateX(15deg) rotateY(-45deg);animation: rotate_one 1s linear infinite -0.8s;
}.loading .item:nth-child(2) {border-bottom: 7px solid #f40968;transform: rotateX(50deg) rotateY(10deg);animation: rotate_two 1s linear infinite -0.4s;
}.loading .item:nth-child(3) {border-bottom: 7px solid #77d970;transform: rotateX(35deg) rotateY(55deg);animation: rotate_three 1s linear infinite;
}@keyframes rotate_one {to {transform: rotateX(15deg) rotateY(-45deg) rotateZ(360deg);}
}@keyframes rotate_two {to {transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);}
}@keyframes rotate_three {to {transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);}
}

Gitee

loading效果整合

css实现多个loading动画效果相关推荐

css loading 字体动画效果,CSS实现四种loading动画效果
四种加载效果 /*第一种*/.demo1 { 4px; height: 4px; border-radius: 2px; background: #68b2ce;float: left; margin ...
HTML+CSS+JS实现 ❤️制作loading动画效果❤️
css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
游戏底特律：变人Loading动画效果实现
1.需求描述上周接到个好玩的任务,就是模仿游戏底特律人的loading动画效果,原始视频如下: 2.实现难点分析与概括: 由上面视频可以看出,此效果难点主要在缝隙的圆弧处理和缝隙的运动规律上.缝隙处 ...
android Loading动画效果
Android Loading动画效果现在项目不是很忙,所以想不能闲着,研究一下大神们是如何实现等待框中的动画显示的,之前看着效果那么帅,那么酷.比猫画虎的写了写代码. 首先在res文件夹下新建一 ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...

css实现多个loading动画效果

效果展示

01

02

03

04

05

06

07

08

09

10

Gitee

css实现多个loading动画效果相关推荐

最新文章

热门文章