css+js实现可调节参数的圆点排队进入loading加载动画效果代码-html代码-BFW代码库

css+js实现可调节参数的圆点排队进入loading加载动画效果代码

代码语言：html

代码描述：css+js实现可调节参数的圆点排队进入loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
body {
  margin: 0px;
  background-color: #14293E;
  overflow: hidden;
  font-family: arial;
  color: #ccc;
}

:root {
  --loader-size: 10px;
  --loader-delay : 0.5s;
  --loader-distance : 60px;
  --loader-size-factor : 10;
  --loader-animation-duration: 2s;
 
}

.loader {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  height: var(--loader-size);
}

.loader .dot {
   width:  var(--loader-size);
   height: var(--loader-size);
   background-color: #2ECC71;
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
  opacity: 0;
   transform: translate(-50%, -50%);
   border-radius: var(--loader-size);
   animation-name: dot_move;
   animation-duration: var(--loader-animation-duration);
   animation-iteration-count: infinite;
   animation-delay: var(--loader-delay);
   margin-top: calc(var(--loader-size) / -2);
}
  

/* yeah.... i know multiplying by 1 is stupid :D */

.loader .dot1 { margin-left: calc(var(--loader-distance) * -2); animation-delay: calc(var(--loader-delay) * 4);}
.loader .dot2 { margin-left: calc(var(--loader-distance) * -1); animation-delay: calc(var(--loader-delay) * 3);}
.loader .dot3 { margin-left: 0; animation-delay: calc(var(--loader-delay) * 2);}
.loader .dot4 { margin-left: calc(var(--loader-distance) * 1); animation-delay: calc(var(--loader-delay) * 1);}
.loader .dot5 { margin-left: calc(var(--loader-distance) * 2); animation-delay: 0s;}

@keyframes dot_move {
    0% { left: 0%; opacity: 0; height:  var(--loader-size); width: calc(var(--loader-size)*var(--loader-size-factor)); scale:1;}
    10% { left: 45%; opacity: 0.7; width:  var(--loader-size); scale:0.2;}
    50% { background-color: #fff; scale:1.2;}
    90% { left: 55%; opacity: 0.7; width:  var(--loader-size); scale:0.2;}
    100% { left: 100%; opacity: 0;  height:  var(--loader-size); width:calc(var(--loader-size)*var(--loader-size-factor)); sc.........完整代码请登录后点击上方下载按钮下载查看