（2018/12/21  0:21 使用推薦插入程式碼功能報錯）

HTML程式碼：

<div class="circle"></div>

CSS程式碼：

html,
body,
.circle{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle{
  width: 10em;
  height: 10em;
  background-color: blue;
  border-radius: 50%;
}
.circle:before{
  content: '';
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border-width: 0.1em;
  border-style: solid;
  border-top-color: cyan;
  border-right-color: cyan;
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* 名稱 週期 動畫從頭到尾的速度是相同的 次數 動畫應該正常播放 */
  animation: animate 2s linear infinite normal;
}
@keyframes animate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(1440deg);
  }
}