---

web前端之纯css实现的加载、steps、calc

style

/* -------平滑加载------- */
.smooth_loading {background: linear-gradient(#333333 0 0) 0 / 0% no-repeat #f5f5f5;animation: smooth_loading_animation 2s infinite linear;
}@keyframes smooth_loading_animation {100% {background-size: 100%;}
}/* -------按步加载------- */
.step_by_step_loading {border-radius: 20px;background: linear-gradient(#ffa500 0 0) 0 / 0% no-repeat #f5f5f5;animation: step_by_step_loading_animation 2s infinite steps(10);
}@keyframes step_by_step_loading_animation {100% {background-size: 110%;}
}/* -------条纹加载------- */
.stripe_loading {border-radius: 20px;background: repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0 / 0% no-repeat, repeating-linear-gradient(135deg, #f5f5f5 0 10px, #eeeeee 0 20px) 0 / 100%;animation: stripe_loading_animation 2s infinite;
}@keyframes stripe_loading_animation {100% {background-size: 100%;}
}/* -------虚线加载------- */
.dashed_loading {-webkit-mask: linear-gradient(90deg, #333333 70%, #0000 0) 0 / 20%;background: linear-gradient(#333333 0 0) 0 / 0% no-repeat #ddd;animation: dashed_loading_animation 2s infinite steps(6);
}@keyframes dashed_loading_animation {100% {background-size: 120%;}
}/* -------电池加载------- */
.battery_loading {position: relative;border: 2px solid #333333;background: repeating-linear-gradient(90deg, #333333 0 10px, #0000 0 16px) 0 / 0% no-repeat content-box content-box;animation: battery_loading_animation 2s infinite steps(6);
}.battery_loading::before {position: absolute;content: "";top: 50%;left: 100%;transform: translateY(-50%);width: 12px;height: 12px;border: 2px solid #333333;
}@keyframes battery_loading_animation {100% {background-size: 120%;}
}/* -------内嵌加载------- */
.embedded_loading {position: relative;border-radius: 20px;color: #514b82;border: 2px solid #514b82;
}.embedded_loading::before {position: absolute;content: "";margin: 2px;inset: 0 100% 0 0;border-radius: inherit;background: #514b82;animation: embedded_loading_animation 2s infinite;
}@keyframes embedded_loading_animation {100% {inset: 0;}
}/* -------珠链加载------- */
.bead_chain_loading {-webkit-mask: radial-gradient(circle closest-side, #333333 94%, #0000) 0 0 / 25% 100%, linear-gradient(#333333 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat;background: linear-gradient(#25b09b 0 0) 0 / 0% no-repeat #f5f5f5;animation: bead_chain_loading_animation 2s infinite linear;
}@keyframes bead_chain_loading_animation {100% {background-size: 100%;}
}/* -------斑马线加载------- */
.zebra_loading {border-radius: 50%;-webkit-mask: linear-gradient(0deg, #333333 55%, transparent 0) bottom / 100% 18.18%;background: linear-gradient(#f03355 0 0) bottom / 100% 0% no-repeat #f5f5f5;animation: zebra_loading_animation 2s infinite steps(7);
}@keyframes zebra_loading_animation {100% {background-size: 100% 115%;}
}/* -------水柱加载------- */
.water_column_loading {--r1: 154%;--r2: 68.5%;border-radius: 50%;background: radial-gradient(var(--r1) var(--r2) at top, transparent 79.5%, #269af2 80%) center left, radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center, radial-gradient(var(--r1) var(--r2) at top, transparent 79.5%, #269af2 80%) center right, #cccccc;background-size: 50.5% 220%;background-position: -100% 0%, 0% 0%, 100% 0%;background-repeat: no-repeat;animation: water_column_loading_animation 2s infinite linear;
}@keyframes water_column_loading_animation {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%;}
}/* -------信号加载------- */
.signal_loading {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 #dddddd;animation: signal_loading_animation 2s infinite steps(6);
}@keyframes signal_loading_animation {100% {background-size: 120% 120%;}
}

---

html

<!-- 信号加载 -->
<div class="signal_loading w_120 h_60"></div><!-- 水柱加载 -->
<div class="water_column_loading w_68 h_68"></div><!-- 斑马线加载 -->
<div class="zebra_loading w_68 h_68"></div><!-- 珠链加载 -->
<div class="bead_chain_loading w_120 h_24"></div><!-- 内嵌加载 -->
<div class="embedded_loading w_120 h_20"></div><!-- 电池加载 -->
<div class="battery_loading w_120 h_30 padding_2"></div><!-- 虚线加载 -->
<div class="dashed_loading w_120 h_20"></div><!-- 条纹加载 -->
<div class="stripe_loading w_120 h_20"></div><!-- 按步加载 -->
<div class="step_by_step_loading w_120 h_20"></div><!-- 平滑加载 -->
<div class="smooth_loading w_120 h_20"></div>

---

calc

calc()此CSS函数允许在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>、<angle>、<time>、<percentage>、<number>或<integer>。
此calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

---

steps

steps阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，表示两个关键帧之间的动画效果，默认是ease。
steps有两个参数：
参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。
参数二是表示分成几段后，start还是end去执行动画。参数二有两个可选值start和end，默认是end。