css 簡易 loading 加載圖

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

力求精簡，以下 css 樣式都是集成在一個類上，也就是說，只需要自定義一個元素，在上面加一個 class 樣式就可以使用了

.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) }
    }

如下：

或：

 

.double{
  display: block;
  width: 30px;
  height: 30px;
  margin: 30px auto;
  position: relative;
}
.double::before,.double::after{
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #98bff6;
  position: absolute;
  top: 5px;
}
.double::before{
  left:0;
  animation: double_lt_position 2s infinite linear,double_lt_size 2s infinite linear;
}
.double::after{
  left:20px;
  animation: double_gt_position 2s infinite linear,double_gt_size 2s infinite linear;
}
@keyframes bg{
  0% {background:red}
  50% {background:yellow}
  100% {background:red}
}
@keyframes double_lt_position {
  50% {left:20px}
}
@keyframes double_lt_size {
  0% { transform: scale(1) }
  25% { transform: scale(0.5)  }
  50% { transform: scale(1) }
  75% { transform: scale(1.5)  }
  100% { transform: scale(1) }
}
@keyframes double_gt_position {
  50% {left: 0}
}
@keyframes double_gt_size {
  0% { transform: scale(1) }
  25% { transform: scale(1.5)  }
  50% { transform: scale(1) }
  75% { transform: scale(0.5)  }
  100% { transform: scale(1) }
}

 

如下：

或：

.double{
  display: block;
  width: 30px;
  height: 30px;
  margin: 30px auto;
  position: relative;
}
.double::before,.double::after{
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #98bff6;
  position: absolute;
  top: 5px;
  left: 15px;
}
.double::before{
  animation: double_lt 2s linear infinite;
}
.double::after{
  animation: double_gt 2s linear infinite;
}
@keyframes double_lt {
  0% { transform: scale(1) translate(-8px,0) }
  25% { transform: scale(0.5) translate(0,-7px) }
  50% { transform: scale(1) translate(8px,0) }
  75% { transform: scale(1.5) translate(0,2px) }
  100% { transform: scale(1) translate(-8px,0) }
}
@keyframes double_gt {
  0% { transform: scale(1) translate(8px,0) }
  25% { transform: scale(1.5) translate(0,2px) }
  50% { transform: scale(1) translate(-8px,0) }
  75% { transform: scale(0.5) translate(0,-7px) }
  100% { transform: scale(1) translate(8px,0) }
}

 

 如下：

 

 

 

 

-- end --