Share 10 純粋な CSS で実装された読み込み効果-CSSチュートリアル-php.cn

Share 10 純粋な CSS で実装された読み込み効果

青灯夜游

リリース： 2022-03-31 20:47:38

転載

4413 人が閲覧しました

読み込みが発生すると、UI フレームワークまたは Baidu に組み込まれ、CV がプロジェクトに追加されますか?しかし、自分で実装するとなると、まったくわかりません。この記事では、純粋な CSS で実装された 10 個の読み込み効果を紹介します。

Share 10 純粋な CSS で実装された読み込み効果

#T. Afif が Twitter で紹介した 10 個の Loading エフェクトをご覧ください。上に示したように。

はい、とても実用的で素晴らしいので、記録しました。

正常な動作を確保するために、まず次のことを規定します:

* {
  box-sizing: border-box;
}

ログイン後にコピー

1. スムーズな読み込み

Share 10 純粋な CSS で実装された読み込み効果

ログイン後にコピー

.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)
linear-gradient(#000 0 100%) と理解できます。まだ慣れていない場合は、linear- をコピーしてください。 gradient(#000 0 50%, #f00 50% 0)、元の部分を置き換えて実行します。 linear-gradient(#000 0 0) がぎこちない場合は、#000 と書いてください。 [推奨される学習: css ビデオチュートリアル ]
は
background-position: 0;/background-size : 0;の略称。
2. ステップごとに読み込みます

ログイン後にコピー

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

ログイン後にコピー

Share 10 純粋な CSS で実装された読み込み効果

はい
step(10, end) の省略形は、最初に誰もいないことを示し、したがって point 2
#100% {background-size:110%}
step
のパーセンテージをさらに 1 つ追加します。上記の step は 10 なので、## になります。 #100% ( 1/10)*100% = 110%3. ストライプ読み込み

ログイン後にコピー

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

ログイン後にコピー

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

灰色のゼブラストライプを描画します, Share 10 純粋な CSS で実装された読み込み効果 repeat-linear-gradient(135deg,#f03355 0 10px,# ffa516 0 20px) 0/0% no-repeat

は、読み込み中のプログレスバーのストライプです。

4. 点線の読み込み

ログイン後にコピー

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

ログイン後にコピー

-webkit-mask

のデフォルト値は Share 10 純粋な CSS で実装された読み込み効果 repeat

、それ以外の場合はマスクされます 5 つではありません。

5. バッテリーの読み込み

ログイン後にコピー

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

ログイン後にコピー

オリジナルの作成者は、

.progress-5::before

疑似要素を次のように実装しました。 Share 10 純粋な CSS で実装された読み込み効果

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

ログイン後にコピー

#0000 は透明であり、同様に透明です

6。インライン読み込み

名前は少し不適切ですが、重要ではありません。読者は次のことを行うことができます。自然に絵を見て理解してください。

ログイン後にコピー

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

ログイン後にコピー

inset:0 100% 0 0;

右側は Share 10 純粋な CSS で実装された読み込み効果 100%

にインデントされているため、

keyframes にあります。 の部分では、inset を 0 に設定する必要があります。 7. ビーズチェーンの読み込み

ログイン後にコピー

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

ログイン後にコピー

mask

-webkit-mask

Medium Share 10 純粋な CSS で実装された読み込み効果 radial-gradient

は分割です幅を4等分し、各部分の最小の

最も近い側の辺を直径とする円を描きます。 8. 横断歩道読み込み

ログイン後にコピー

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

ログイン後にコピー

linear-gradient

で描いた角度を調整し、マスクを追加します。 Share 10 純粋な CSS で実装された読み込み効果

9. 水柱荷重

ログイン後にコピー

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

ログイン後にコピー

radial-gradient

水平面のゆらぎを3つの円だけ描きます。 Share 10 純粋な CSS で実装された読み込み効果 var(--r1)

定義した属性値を直接呼び出します。 Skill

get ...10. 信号読み込み

ログイン後にコピー

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

ログイン後にコピー

repeat-radial-gradient

を使用するメソッド円形のマスクを描画します。 Share 10 純粋な CSS で実装された読み込み効果 radial-gradient