# 用 CSS 實作載入動畫 Elantris [TOC] --- ## 實作 <style> .loading { position: relative; width: 16rem; height: 3rem; overflow: hidden; border: 2px solid black; border-radius: 0.5rem; background: white; } .loading-1::before { content: ""; position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 100%; background: black; } @keyframes growWidth { from { width: 0; } to { width: 100%; } } .loading-2::before { animation-name: growWidth; animation-duration: 4s; animation-timing-function: steps(10, jump-start); animation-iteration-count: infinite; } .loading-3::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, white 0%, white 25%, transparent 25%, transparent 75%, white 75%); background-size: 10% 100%; } </style> ### 外框 <div class="loading"></div> ```css .loading { position: relative; width: 16rem; height: 3rem; border: 2px solid black; border-radius: 0.5rem; background: white; } ``` ### 進度條 1. 內層有顏色、會變動的部分 2. 定位左上、左下為起始點 3. width 100% 為可變動值 <div class="loading loading-1"></div> ```css .loading::before { content: ""; position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 100%; background: black; } ``` ### 動畫 1. 用動畫改變 width 2. timing-function 用 steps() 製造頓點 <div class="loading loading-1 loading-2"></div> ```css @keyframes growWidth { from { width: 0; } to { width: 100%; } } .loading::before { /* ... */ animation-name: growWidth; animation-duration: 4s; animation-timing-function: steps(10, jump-start); animation-iteration-count: infinite; } ``` ### 遮罩 1. 用漸層背景製造白色、透明區塊 2. background-size 設為 10% 製造一排透明窗戶蓋在最上方 <div class="loading loading-1 loading-2 loading-3"></div> ```css .loading::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, white 0%, white 25%, transparent 25%, transparent 75%, white 75%); background-size: 10% 100%; } ``` ## 完整程式碼 [Pure CSS Loading Bar](https://codepen.io/Elantris/pen/gONgVEY)