纯css实现loading加载中（多种展现形式）
Posted 水星记_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯css实现loading加载中（多种展现形式）相关的知识，希望对你有一定的参考价值。
前言
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面一起看看吧。
1. 常规 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="loadBox">
<div class="loaderContantBox"></div>
</div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.loadBox .loaderContantBox
color: white;
font-size: 40px;
overflow: hidden;
width: 40px;
height: 40px;
border-radius: 50%;
transform: translateZ(0);
/* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
@keyframes loadBox
0%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
5%,
95%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
10%,
59%
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
-0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
-0.297em -0.775em 0 -0.477em;
20%
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
-0.749em -0.34em 0 -0.477em;
38%
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
-0.82em -0.09em 0 -0.477em;
100%
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
@keyframes round
0%
transform: rotate(0deg); /* 开始旋转 div 元素 */
100%
transform: rotate(360deg); /* 结束旋转 div 元素 */
</style>
2. 抛出线条式 loading
实现效果
代码如下
<template>
<div class="parentBox">
<svg class="scalableBox" viewBox="0 0 128 256" width="128px" height="256px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="ap-grad1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
<linearGradient id="ap-grad2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="hsl(193,90%,55%)" />
<stop offset="50%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(253,90%,55%)" />
</linearGradient>
</defs>
<circle class="apringBox" r="56" cx="64" cy="192" fill="none" stroke="#ddd" stroke-width="16" stroke-linecap="round" />
<circle class="apwormOneBox" r="56" cx="64" cy="192" fill="none" stroke="url(#ap-grad1)" stroke-width="16" stroke-linecap="round"
stroke-dasharray="87.96 263.89" />
<path class="apwormTwoBox" d="M120,192A56,56,0,0,1,8,192C8,161.07,16,8,64,8S120,161.07,120,192Z" fill="none" stroke="url(#ap-grad2)"
stroke-width="16" stroke-linecap="round" stroke-dasharray="87.96 494" />
</svg>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.scalableBox
width: 40px;
height: 70px;
.apringBox
transition: stroke 0.3s;
.apwormOneBox,
.apwormTwoBox
animation-duration: 3s;
animation-iteration-count: infinite;
.apwormTwoBox
animation-name: worm2;
visibility: hidden;
.apwormOneBox
animation-name: worm1;
@media (prefers-color-scheme: dark)
:root
--bg: hsl(var(--hue), 10%, 10%);
--fg: hsl(var(--hue), 10%, 90%);
.apringBox
stroke: hsla(var(--hue), 10%, 90%, 0.9);
@keyframes worm1
from
animation-timing-function: ease-in-out;
stroke-dashoffset: -87.96;
20%
animation-timing-function: ease-in;
stroke-dashoffset: 0;
60%
stroke-dashoffset: -791.68;
visibility: visible;
60.1%,
to
stroke-dashoffset: -791.68;
visibility: hidden;
@keyframes worm2
from,
60%
stroke-dashoffset: -87.96;
visibility: hidden;
60.1%
animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
stroke-dashoffset: -87.96;
visibility: visible;
77%
animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
stroke-dashoffset: -340;
visibility: visible;
to
stroke-dashoffset: -669.92;
visibility: visible;
</style>
3. 进度条颜色覆盖式 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 20px;
background: linear-gradient(rgb(12, 132, 223) 0 0) 0/0% no-repeat #ddd;
animation: cartoon 2s infinite linear;
@keyframes cartoon
100%
background-size: 100%;
</style>
4. 椭圆式进度条 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 22px;
border-radius: 20px;
color: #514b82;
border: 2px solid;
position: relative;
.contantBox::before
content: "";
position: absolute;
margin: 2px;
inset: 0 100% 0 0;
border-radius: inherit;
background: #514b82;
animation: cartoon 2s infinite;
@keyframes cartoon
100%
inset: 0;
</style>
5. 卡顿式进度条 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 20px;
border-radius: 20px;
background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
animation: cartoon 2s infinite steps(10);
@keyframes cartoon
100%
background-size: 110%;
</style>
6. 进度条波纹 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 20px;
border-radius: 20px;
background: repeating-linear-gradient(
135deg,
#f03355 0 10px,
#ffa516 0 20px
)
0/0% no-repeat,
repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
animation: cartoon 2s infinite;
@keyframes cartoon
100%
background-size: 100%;
</style>
7. 进度条分隔式 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 20px;
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
background: linear-gradient(rgb(73, 255, 57) 0 0) 0/0% no-repeat #ddd;
animation: cartoon 2s infinite steps(6);
@keyframes cartoon
100%
background-size: 120%;
</style>
8. 圆球连接式 loading
实现效果
代码如下
<template>
<div class="parentBox">
<div class="contantBox"></div>
</div>
</template>
<style lang="less" scoped>
.parentBox
height: 100%;
background: rgb(31, 31, 31);
padding: 100px;
.contantBox
width: 120px;
height: 24px;
-webkit-mask: radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25%
100%,
linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 纯css3 加载loading动画特效