分享10個純 CSS 實現的 Loading 效果-css教學-PHP中文網

首頁

web前端

css教學

分享10個純 CSS 實現的 Loading 效果

青灯夜游

Mar 31, 2022 am 11:01 AM

cssloading

我們遇到加載，要嘛是UI框架中自帶，要嘛就是百度，然後CV到專案中？但是，自己實現的時候，又會沒有想法。以下這篇文章就來跟大家分享10個純 CSS 實現的 Loading 效果，希望對大家有幫助！

分享10個純 CSS 實現的 Loading 效果

在推特上面看到 T. Afif 介紹的十個 Loading 效果。如上圖。

Yeah，很讚哦，挺實用的，遂記錄下來。

為保證運作正常，咱先規定下：

* {
  box-sizing: border-box;
}

1. 平滑載入

分享10個純 CSS 實現的 Loading 效果

<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) 你可以理解為linear-gradient(#000 0 100%)，如果還不熟悉，複製linear-gradient(#000 0 50%, #f00 50% 0) ，替換原先的部分跑一下。覺得 linear-gradient(#000 0 0) 別扭的話，直接寫 #000 即可。【建議學習：css影片教學】
0/0% 是background-position: 0;/background-size : 0; 的簡寫。

2. 步驟載入

分享10個純 CSS 實現的 Loading 效果

<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) 是step(10, end) 的簡寫，指明剛開始沒有，所以有第2點的處理
##100% {background-size:110%} 增加多一個step 的百分比，上面的step 是10，所以是100% ( 1/10)*100% = 110%

#3. 條紋載入

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

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

畫出灰色的斑馬線條紋，repeating-linear-gradient(135deg,#f03355 0 10pxlinear-gradient(135deg,#f03355 0 10pxx,#ffa 20px) 0/0% no-repeat 則是進度條加載的條紋。 4. 虛線載入

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

-webkit-mask

預設有值repeat，不然遮罩不會有五個。 5. 電池載入

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

原作者對

.progress-5::before

偽元素實作如下：<pre class='brush:php;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>

#0000 是透明，同等transparent

#6. 內嵌載入

這名字起得有些不貼切，不過不重要，讀者看圖自然理解。

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

inset:0 100% 0 0;

右邊內縮100%，所以在keyframes 部分需要將inset 設定為0。 7. 珠鍊載入

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

遮罩

-webkit-mask

中radial-gradient 是將寬度四等份，每份以最小closest-side 的邊為直徑畫圓。 8. 斑馬線載入

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

對

linear-gradient

所描繪的角度做調整，再加上蒙版。 9. 水柱載入

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

radial-gradient

畫出水平面的波動，就三個圓。 var(--r1) 直接呼叫定義好的屬性值。技能get ...10. 訊號載入

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