Home >Web Front-end >CSS Tutorial >Share 10 Loading effects implemented in pure CSS

Share 10 Loading effects implemented in pure CSS

青灯夜游
青灯夜游forward
2022-03-31 11:01:484691browse

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;
}

1. Smooth loading

Share 10 Loading effects implemented in pure CSS

<div class="progress-1"></div>
.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%}
}
  • 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

Share 10 Loading effects implemented in pure CSS

<div class="progress-2"></div>
.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%}
}

  • 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%

  • 3. Stripe loading

<div class="progress-3"></div>
.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%}
}
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>
.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%}
}
Share 10 Loading effects implemented in pure CSS

-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>
.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%}
}
Share 10 Loading effects implemented in pure CSSThe original author implemented the

.progress-5::before

pseudo-element as follows: <pre class="brush:css;toolbar:false;">.progress-5::before { content:&quot;&quot;; 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>

#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>
.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}
}
Share 10 Loading effects implemented in pure CSS

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>
.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%}
}

maskShare 10 Loading effects implemented in pure CSS-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>
.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%}
}

Adjust the angle drawn by Share 10 Loading effects implemented in pure CSSlinear-gradient

and add a mask.

9. Water column loading

<div class="progress-9"></div>
.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%}
}

Share 10 Loading effects implemented in pure CSSradial-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>
.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%}
}

Use the Share 10 Loading effects implemented in pure CSSrepeating-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!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete