今天想要分享的是這一個 Youtube 影片做出來的等待畫面，
我只有挑他的其中一個寫，
其他可以看他影片做做看。

loader 是個在網頁 render 前的東西，
讓你知道還要等一下，
等動畫結束的時候，就是頁面 loading 好的時候。

本篇關鍵字

• position: absolute
• ::after
• border

範例檔

HTML

<span class="spinner"></span>

CSS

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner{ 
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ddd;
  position: relative;
}

.spinner::after{
  content:'';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  border-color: darkolivegreen transparent;
  animation: rotate .9s infinite linear;
}

@keyframes rotate{
  0% {
    transform: rotate(0deg) scale(1);
  }

  50%{
    transform: rotate(60deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

• ::after 設定跟 .spinner 一樣的大小
• 老樣子用 position: absolute 將 ::after 定位到 .spinner 上
• 要注意有 border 的話，top、left 要考慮 border 的寬度
• 設定上下 border 有顏色，左右透明，做出 ( ) 效果（反過來設定也可以啦）
• 設定 @keyframes 做出轉動有被加速的效果，設定 animation-speed 應該也能達到類似效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要來組合畫面囉～