效果展示
在开发中,为了提高用户体验,通常在加载数据的时候会给一个
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);
}
}