10.1拓展之：加载样式（圆内转个不停）

（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);
  }
}