css3 - 线性渐变;缩放loading

项目中有用到loading

有用过各种loading.gif

element-ui 图标,设计大大都不满意

没办法,只能手写

网上查找,整理为直接所需

好记性不如烂笔头.

先记为敬

效果图:

直接上代码

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="loading.css">
    <style>
       body{ 
         padding:100px;
      }
    </style>
</head>
<body>
    <!-- 线性-渐变 -->
    <div class="loader-liner line-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!-- ball-缩放 -->
    <div class="loader-ball ball-fade-loader">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

css- loading.css

.loader-liner {
  position: relative;
  width: 14px;
  height: 14px;
}
.loader-ball {
  position: relative;
  width: 30px;
  height: 30px;
  margin-top:100px; 
  background-color: #989ca1;
}
/* 线性-渐变 */
@-webkit-keyframes line-fade-loader {
  12.5% {
    opacity: 0.15;
  }
  25% {
    opacity: 0.25;
  }
  25% {
    opacity: 0.35;
  }
  37.5% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.55;
  }
  62.5% {
    opacity: 0.65;
  }

  87.5% {
    opacity: 0.75;
  }

  100% {
    opacity: 0.85;
  }
}

@keyframes line-fade-loader {
  15% {
    opacity: 0.15;
  }
  25% {
    opacity: 0.25;
  }
  25% {
    opacity: 0.35;
  }
  37.5% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.55;
  }
  62.5% {
    opacity: 0.65;
  }
  87.5% {
    opacity: 0.75;
  }
  100% {
    opacity: 0.85;
  }
}

.line-fade-loader {
  position: relative;
}
.line-fade-loader > div:nth-child(1) {
  top: 10px;
  left: 6px;
  -webkit-animation: line-fade-loader 0.8s 0.12s infinite linear;
  animation: line-fade-loader 0.8s 0.12s infinite linear;
}
.line-fade-loader > div:nth-child(2) {
  top: 9px;
  left: 10px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-fade-loader 0.8s 0.24s infinite linear;
  animation: line-fade-loader 0.8s 0.24s infinite linear;
}
.line-fade-loader > div:nth-child(3) {
  top: 5px;
  left: 11px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-fade-loader 0.8s 0.36s infinite linear;
  animation: line-fade-loader 0.8s 0.36s infinite linear;
}
.line-fade-loader > div:nth-child(4) {
  top: 1px;
  left: 10px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-fade-loader 0.8s 0.48s infinite linear;
  animation: line-fade-loader 0.8s 0.48s infinite linear;
}
.line-fade-loader > div:nth-child(5) {
  top: 0px;
  left: 6px;
  -webkit-animation: line-fade-loader 0.8s 0.6s infinite linear;
  animation: line-fade-loader 0.8s 0.6s infinite linear;
}
.line-fade-loader > div:nth-child(6) {
  top: 1px;
  left: 2px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: line-fade-loader 0.8s 0.72s infinite linear;
  animation: line-fade-loader 0.8s 0.72s infinite linear;
}
.line-fade-loader > div:nth-child(7) {
  top: 5px;
  left: 1px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: line-fade-loader 0.8s 0.84s infinite linear;
  animation: line-fade-loader 0.8s 0.84s infinite linear;
}
.line-fade-loader > div:nth-child(8) {
  top: 9px;
  left: 2px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: line-fade-loader 0.8s 0.96s infinite linear;
  animation: line-fade-loader 0.8s 0.96s infinite linear;
}
.line-fade-loader > div {
  position: absolute;
  width: 2px;
  height: 4px;
  background-color: #294872;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
  
/* ball scale */
  @-webkit-keyframes ball-fade-loader {
      50% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    @keyframes ball-fade-loader {
      50% {
        opacity: 0.3;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
      }
    
      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }
    
    .ball-fade-loader {
      position: relative;
    }
    .ball-fade-loader > div:nth-child(1) {
      top: 23px;
      left: 12px;
      -webkit-animation: ball-fade-loader 0.8s 0s infinite linear;
      animation: ball-fade-loader 0.8s 0s infinite linear;
    }
    .ball-fade-loader > div:nth-child(2) {
      top: 20px;
      left: 20px;
      -webkit-animation: ball-fade-loader 0.8s 0.12s infinite linear;
      animation: ball-fade-loader 0.8s 0.12s infinite linear;
    }
    .ball-fade-loader > div:nth-child(3) {
      top: 12px;
      left: 23px;
      -webkit-animation: ball-fade-loader 0.8s 0.24s infinite linear;
      animation: ball-fade-loader 0.8s 0.24s infinite linear;
    }
    .ball-fade-loader > div:nth-child(4) {
      top: 4px;
      left: 20px;
      -webkit-animation: ball-fade-loader 0.8s 0.36s infinite linear;
      animation: ball-fade-loader 0.8s 0.36s infinite linear;
    }
    .ball-fade-loader > div:nth-child(5) {
      top: 1px;
      left: 12px;
      -webkit-animation: ball-fade-loader 0.8s 0.48s infinite linear;
      animation: ball-fade-loader 0.8s 0.48s infinite linear;
    }
    .ball-fade-loader > div:nth-child(6) {
      top: 4px;
      left: 4px;
      -webkit-animation: ball-fade-loader 0.8s 0.6s infinite linear;
      animation: ball-fade-loader 0.8s 0.6s infinite linear;
    }
    .ball-fade-loader > div:nth-child(7) {
      top: 12px;
      left: 1px;
      -webkit-animation: ball-fade-loader 0.8s 0.72s infinite linear;
      animation: ball-fade-loader 0.8s 0.72s infinite linear;
    }
    .ball-fade-loader > div:nth-child(8) {
      top: 20px;
      left: 4px;
      -webkit-animation: ball-fade-loader 0.8s 0.84s infinite linear;
      animation: ball-fade-loader 0.8s 0.84s infinite linear;
    }
    .ball-fade-loader > div {
      background-color: #ffffff;
      width: 6px;
      height: 6px;
      border-radius: 6px;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
    }

css3 - 线性渐变;缩放loading

猜你喜欢