纯css实现炫酷10种加载中动画（2）

今天分享的这一段是纯css实现的10种动画效果。每个.progress类定义了不同的样式属性，从.progress-1到.progress-10，每个都有不同的外观和动画效果。

这些动画可以用于网页中的加载中或其他需要显示进度或等待状态的场景。它们以不同的方式使用边框、背景和渐变来创建有吸引力的加载等待效果。

1.progress-1采用线性渐变背景，通过动画（animation）实现背景大小从0%到100%的变化，形成流动效果。

2.progress-2利用边框半径和线性渐变背景，通过动画实现背景大小从0%到110%的变化，形成逐步显示的效果。

3.progress-3通过重复线性渐变背景和动画实现彩虹色的动态效果。利用重复的线性渐变背景，不断进行背景位置的偏移，形成动感效果。

4.progress-4使用遮罩效果和线性渐变背景，通过动画实现遮罩的移动，从而显示出背后的渐变背景，形成类似刮刮乐的效果。

5.progress-5通过边框、填充和伪元素的组合，创建了一个带动画效果的条纹进度条。

6.progress-6通过伪元素和动画，实现了背景色从右边出现并填充整个进度条的效果。

7.progress-7利用遮罩和线性渐变背景，通过动画实现遮罩的移动，展示出背后的渐变背景。

8.progress-8通过遮罩和径向渐变背景，实现了一个圆形进度条的效果。

9.progress-9利用径向渐变背景和动画，实现了一个炫彩的圆环进度条。

10.progress-10通过遮罩和径向渐变背景，以及动画实现了一个具有立体感的进度条。

完整代码如下：

<div class="progress-1"></div>
<div class="progress-2"></div>
<div class="progress-3"></div>
<div class="progress-4"></div>
<div class="progress-5"></div>
<div class="progress-6"></div>
<div class="progress-7"></div>
<div class="progress-8"></div>
<div class="progress-9"></div>
<div class="progress-10"></div>
</template>

<script>
import data from "./data.json";

</script>

<style lang="scss" scoped>
.progress-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p1 2s infinite linear;
}
@keyframes p1 {
    100% {background-size:100%}
}

.progress-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   linear-gradient(orange 0 0) 0/0% no-repeat
   lightblue;
  animation:p2 2s infinite steps(10);
}
@keyframes p2 {
    100% {background-size:110%}
}

.progress-3 {
  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:p3 2s infinite;
}
@keyframes p3 {
    100% {background-size:100%}
}

.progress-4 {
  width:120px;
  height:20px;
  -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
  background:
   linear-gradient(#000 0 0) 0/0% no-repeat
   #ddd;
  animation:p4 2s infinite steps(6);
}
@keyframes p4 {
    100% {background-size:120%}
}

.progress-5 {
  width:80px;
  height:40px;
  border:2px solid currentColor;
  border-right-color: transparent;
  padding:3px;
  background: 
    repeating-linear-gradient(90deg,currentColor 0 10px,#0000 0 15px) 
    0/0% no-repeat content-box content-box;
  position: relative;
  animation:p4 2s infinite steps(6);
}
.progress-5::before {
  content:"";
  position: absolute;
  top:-2px;
  bottom:-2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        #0000   calc(50% - 7px),currentColor 0 calc(50% - 5px),
        #0000 0 calc(50% + 5px),currentColor 0 calc(50% + 7px),#0000 0) left /100% 100%,
    linear-gradient(currentColor calc(50% - 5px),#0000        0 calc(50% + 5px),currentColor 0) left /2px 100%,
    linear-gradient(#0000        calc(50% - 5px),currentColor 0 calc(50% + 5px),#0000        0) right/2px 100%;
  background-repeat:no-repeat;
}
@keyframes p5 {
    100% {background-size:120%}
}

.progress-6 {
  width:120px;
  height:22px;
  border-radius: 20px;
  color:#514b82;
  border:2px solid;
  position: relative;
}
.progress-6::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background:currentColor;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}

.progress-7 {
  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% - 12px) no-repeat;
  background:
   linear-gradient(#25b09b 0 0) 0/0% no-repeat
   #ddd;
  animation:p7 2s infinite linear;
}
@keyframes p7 {
    100% {background-size:100%}
}

.progress-8 {
  width:60px;
  height:60px;
  border-radius: 50%;
  -webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
  background:
   linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat
   #ddd;
  animation:p8 2s infinite steps(7);
}
@keyframes p8 {
    100% {background-size:100% 115%}
}


.progress-9 {    
  --r1: 154%;
  --r2: 68.5%;
  width:60px;
  height:60px;
  border-radius: 50%; 
  background:
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
    radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),
    radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%,0% 0%,100% 0%;
  background-repeat:no-repeat;
  animation:p9 2s infinite linear;
}
@keyframes p9 {
    33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
    66%  {background-position: -100%  66%,0%   66% ,100% 66% }
    100% {background-position:    0% 100%,100% 100%,200% 100%}
}


.progress-10 {
  width:120px;
  height:60px;
  border-radius:200px 200px 0 0;
  -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
   #ddd;
  animation:p10 2s infinite steps(6);
}
@keyframes p10 {
    100% {background-size:120% 120%}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}
</style>