使用 css 的 animation ，可以做一個轉圈的 loading 圖，省去了使用 gif 圖的麻煩。

為了力求精簡，以下 css 樣式都是集成在一個類上，

.loading{
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 2px solid #999;
    border-bottom-color: transparent;
    -webkit-animation: loading 0.75s linear infinite
 
;
    animation: loading 0.75s linear infinite;
    // 位置相關
    margin: 6px;
    vertical-align: middle;
}
@-webkit-keyframes loading {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes loading {
    0% { -webkit-transform
 
: rotate(0deg); }
    50% { -webkit-transform: rotate(180deg); }
    100% { -webkit-transform: rotate(360deg); }
}

如下：

或：

.dot{
      display: block;
      width: 32px;
      height: 32px;
      position: relative;

      margin: 10px auto;
    }
    .dot::before,.dot::after{
      content
 
: ‘‘;
      display: block;
      width: 50%;
      height: 50%;
      border-radius: 50%;
      background: #98bff6;
      position: absolute;
      top: 50%;
      left: 50%;
    }
    .dot::before{
      opacity: 0.6;
      transform: scale(2);
      animation: bigDot 2s infinite;
    }
    .dot::after{
      opacity: 0.4;
      transform: scale(0.1);
      animation: smallDot 2s infinite;
    }
    @keyframes bigDot {
      0% { transform: scale(2) }
      50% { transform: scale(0) }
      100% { transform: scale(2) }
    }
    @keyframes smallDot {
      0% { transform: scale(0) }
      50% { transform: scale(2) }
      100% { transform: scale(0) }
    }

如下：

-- end --

css 簡易 loading 加載圖