Share 10 Loading effects implemented in pure CSS-CSS Tutorial-php.cn

When we encounter loading, it is either built-in in the UI framework or Baidu, and then CV is added to the project? However, when you implement it yourself, you will have no idea. In this article, I will share with you 10 Loading effects implemented in pure CSS. I hope it will be helpful to you!

Share 10 Loading effects implemented in pure CSS

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

Yeah, it’s great, very practical, so I recorded it.

To ensure normal operation, we first stipulate:

* {
  box-sizing: border-box;
}

Copy after login

1. Smooth loading

<div class="progress-1"></div>

Copy after login

.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 after login

linear-gradient(#000 0 0) You can understand it as linear-gradient(#000 0 100%). If you are not familiar with it yet, copy linear-gradient(#000 0 50%, #f00 50% 0), replace the original part and run it. If you feel linear-gradient(#000 0 0) is awkward, just write #000. [Recommended learning: css video tutorial]
##0/0% isbackground-position: 0;/background-size : 0;Abbreviation of .

2. Load step by step

<div class="progress-2"></div>

Copy after login

.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 after login

steps(10) Yes The abbreviation of step(10, end) indicates that there is no one at the beginning, so there is point 2
##100% {background-size:110%}
Add one more percentage of step. The above step is 10, so it is 100% ( 1/10)*100% = 110%

<div class="progress-3"></div>

Copy after login

.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 after login

Share 10 Loading effects implemented in pure CSS

repeating- linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%;

Draw gray zebra stripes,repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat is the stripe of the progress bar loading. 4. Dotted line loading

<div class="progress-4"></div>

Copy after login

.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 after login

-webkit-mask

has the default value repeat, otherwise it will be masked There won't be five. 5. Battery loading

<div class="progress-5"></div>

Copy after login

.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 after login

The original author implemented the

.progress-5::before

pseudo-element as follows:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.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; }</pre><div class="contentsignin">Copy after login</div></div>

#0000 is transparent, equally transparent

6. Inline loading

The name is a bit inappropriate, but it’s not important. Readers can see the picture naturally. understand.

<div class="progress-6"></div>

Copy after login

.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 after login

inset:0 100% 0 0;

The right side is indented 100%, so in keyframes## The # part requires setting inset to 0. 7. Bead chain loading

<div class="progress-7"></div>

Copy after login

.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 after login

mask-webkit-mask

medium

radial-gradient is Divide the width into four equal parts and draw a circle with the smallest closest-side side as the diameter for each part. 8. Zebra crossing loading

<div class="progress-8"></div>

Copy after login

.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 after login

Adjust the angle drawn by linear-gradient

and add a mask.

9. Water column loading

<div class="progress-9"></div>

Copy after login

.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 after login

radial-gradient

Draw the fluctuations of the horizontal plane, just three circles.

var(--r1) Directly call the defined attribute value. Skillget ...10. Signal loading

<div class="progress-10"></div>

Copy after login

.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 after login

Use the Share 10 Loading effects implemented in pure CSS repeating-radial-gradient

method Draw a circular mask.

radial-gradient Fill the circular gradient from the bottom upward. Uha, after seeing so many cool operations, have you lost your skills?

Original address: https://twitter.com/ChallengesCss/status/1500437014616940546?cxt=HHwWhIC5gfzgz9IpAAAA

(Learning video sharing: web front-end)

The above is the detailed content of Share 10 Loading effects implemented in pure CSS. For more information, please follow other related articles on the PHP Chinese website!