Day 27 | 等待的时间不无聊 - loader

今天想要分享的是这一个 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 应该也能达到类似效果

以上就是今天的内容，如果有讲不对的地方再请各位留言让我知道，谢谢。
明天要来组合画面罗～