css实现loading加载动画

我们开发过程中经常会遇到loading效果，有时候只能自己去网上找gif图片但是效果很不协调，用框架的话又比较麻烦，所以这里写一个通用的效果。

html部分：

<div id="loading">
  <i></i>
</div>

css部分：

#loading {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

#loading i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border: 4px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loadingAnimation 0.8s infinite Linear;
  margin: auto;
}

@keyframes loadingAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这时候可以把页面背景设置为黑色，效果如下（图片闪烁是因为录屏截图原因）：

loading.gif