Pure CSS achieves ten good Loading effects

See ten Loading effects introduced by T. Afif on Twitter. As shown above.

Yeah, very cool oh, very practical, then recorded.

To ensure normal operation, let’s first stipulate:

* {
  box-sizing: border-box;
}
Copy the code

1. Smooth loading

<div class="progress-1"></div>
Copy the code

.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%}}Copy the code

1. linear-gradient(#000 0 0)You could say thatlinear-gradient(#000 0 100%)If not, copylinear-gradient(#000 0 50%, #f00 50% 0)Let’s replace the original part and run it. thinklinear-gradient(#000 0 0)If not, write directly# 000Can.
2. 0/0% 是 background-position: 0; /background-size: 0;The shorthand.

2. Step by step

<div class="progress-2"></div>
Copy the code

.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%}}Copy the code

1. steps(10) 是 step(10, end)Short for, to indicate not at first, so yesThe second pointThe processing of
2. 100% {background-size:110%}Add one morestepPercent of the topstep 是 10, so it is100% + (1/10)*100% = 110%

3. Stripe loading

<div class="progress-3"></div>
Copy the code

.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%}}Copy the code

repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; Draw a gray zebra stripe, repeating-Linear-gradient (135DEg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat is the stripe of the progress bar loading.

4. Dashed line loading

<div class="progress-4"></div>
Copy the code

.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%}}Copy the code

-webkit-mask has the default value repeat, otherwise the mask will not have five.

5. Load the battery

<div class="progress-5"></div>
Copy the code

.progress-5 {
  width:80px;
  height:40px;
  border:2px solid # 000;
  padding:3px;
  background: 
    repeating-linear-gradient(90deg.# 000 0 10px.# 0000 0 16px) 
    0/0% no-repeat content-box content-box;
  position: relative;
  animation:p5 2s infinite steps(6);
}
.progress-5::before {
  content:"";
  position: absolute;
  top: 50%;
  left:100%;
  transform: translateY(-50%);
  width:10px;
  height: 10px;
  border: 2px solid # 000;
}
@keyframes p5 {
    100% {background-size:120%}}Copy the code

The. Progress-5 ::before pseudo-element is implemented as follows:

.progress-5::before {
  content:"";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left:100%;
  width:10px;
  background:
    linear-gradient(
        # 0000   calc(50% - 7px),# 000 0 calc(50% - 5px),
        # 0000 0 calc(50% + 5px),# 000 0 calc(50% + 7px),# 0000 0) left /100% 100%.linear-gradient(# 000 calc(50% - 5px),# 0000 0 calc(50% + 5px),# 000 0) left /2px 100%.linear-gradient(# 0000 calc(50% - 5px),# 000 0 calc(50% + 5px),# 0000        0) right/2px 100%;
  background-repeat:no-repeat;
}
Copy the code

#0000 is transparent, equally transparent

6. Inline loading

The name is somewhat inappropriate, but it is not important, the reader will understand naturally from the picture.

<div class="progress-6"></div>
Copy the code

.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: #514b82;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}}Copy the code

inset:0 100% 0 0; The right side is indented 100%, so you need to set inset to 0 in the Keyframes section.

7. Bead chain loading

<div class="progress-7"></div>
Copy the code

.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%}}Copy the code

The radial-gradient part of the Webkit-mask is to draw four equal parts of the width, with the smallest closest side as the diameter of each circle.

8. Zebra crossing loading

<div class="progress-8"></div>
Copy the code

.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%}}Copy the code

Adjust the Angle of Linear-gradient description, and add a mask.

9. Water column loading

<div class="progress-9"></div>
Copy the code

.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%) 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 ,# 0000 79.5%.#269af2 80%) center right,
    #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%}}Copy the code

Radial -gradient draws the horizontal fluctuation, which is three circles. Var (–r1) directly calls the defined attribute value. Skills to get…

10. Signal loading

<div class="progress-10"></div>
Copy the code

.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%}}Copy the code

Use the repeating-radial-gradient method to draw the ring mask. Radial -gradient fills from bottom to top.

Uha, after watching so many slutty operations, did you fail to learn?

Reference and postscript

• 10 CSS-only loaders ready to use!
• Blogs