点状loadding加载动画-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Dots Loader</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
      html,
body {
  height: 100%;
}

body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.four {
  width: 0px;
  height: 0px;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.four .dot {
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
}
.four .dot.d1 {
  left: -2px;
  top: -2px;
}
.four .dot.d2 {
  right: -2px;
  top: -2px;
}
.four .dot.d3 {
  left: -2px;
  bottom: -2px;
}
.four .dot.d4 {
  right: -2px;
  bottom: -2px;
}
.four .dot.d5 {
  right: -2px;
  bottom: -2px;
}
.four .dot.d7 {
  left: -2px;
  bottom: -2px;
}
.four .dot.d8 {
  right: -2px;
  top: -2px;
}
.four .dot.d9 {
  left: -2px;
  top: -2px;
}
.four .dot.d10 {
  right: -42px;
  bottom: -42px;
  width: 0;
  height: 0;
}
.four .dot.d11 {
  left: -52px;
  bottom: -2px;
  opacity: 0;
}
.four .dot.d12 {
  right: -52px;
  top: -2px;
  opacity: 0;
}
.four .dot.d13 {
  right: -52px;
  top: -2px;
  opacity: 0;
}
.four .dot.d14 {
  left: -2px;
  bottom: -52px;
  opacity: 0;
}
.four .dot.d15 {
  right: -2px;
  top: -52px;
  opacity: 0;
}
.four .dot.d16 {
  left: -52px;
  bottom: -2px;
  opacity: 0;
}
.four .dot.d17 {
  right: 88px;
  top: -44px;
  opacity: 0;
}
.four .dot.d18 {
  left: 47px;
  bottom: -51px;
  opacity: 0;
}
.four .dot.d19 {
  bottom: -51px;
  left: -2px;
  opacity: 0;
}
.four .dot.d20 {
  left: -51px;
  bottom: -2px;
  opacity: 0;
}
.four .dot.d21 {
  left: -52px;
  top: -1px;
  opacity: 0;
}
.four .dot.d22 {
  top: -52px;
  right: -2px;
  opacity: 0;
}
.four .dot.d23 {
  right: 48px;
  top: -52px;
  opacity: 0;
}
.four .dot.d24 {
  right: -50px;
  bottom: 48px;
  opacity: 0;
}
.four .dot.d25 {
  right: -51px;
  top: 47px;
  opacity: 0;
}
.four .circle {
  width: 4px;
  height: 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.four .circle.c5 {
  width: 30px;
  height: 30px;
  opacity: 0;
}

.progress {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 40px;
  display: none;
}

    </style>

</head>
<body translate="no">
<div class="four">
<div class="dot d1"><div class="circle c4"></div></div>
<div class="dot d2"><div class="circle c1"></div></div>
<div class="dot d3"><div class="circle c2"></div></div>
<div class="dot d4"><div class="circle c3"></div></div>
<div class="dot d5"></div>
<div class="dot d7"></div>
<div class="dot d8"><div class="circle c6"></div></div>
<div class="dot d9"></div>
<div class="dot d10"><div class="circle c5"></div></div>
<div class="dot d11"><div class="circle c8"></div></div>
<div class="dot d12"><div class="circle c7"></div></div>
<div class="dot d13"></div>
<div class="dot d14"></div>
<div class="dot d15"></div>
<div class="dot d16"></div>
<div class="dot d17"></div>
<div class="dot d18"></div>
<div class="dot d19"></div>
<div class="dot d20"></div>
<div class="dot d21"></div>
<div class="dot d22"></div>
<div class="dot d23"></div>
<div class="dot d24"></div>
<div class="dot d25"></div>
</div>
<input class="progress" step=".001" type="range" min="0" max="100" value="0">



<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js'></script>
<script>
      let controlsProgressEl = document.querySelector('.progress');

let tl = anime.timeline({
  // direction: 'alternate',
  loop: true,
  update: () => {
    controlsProgressEl.value = tl.progress;
  } });


$(window).on('load', () => {
  tl.
  add({
    targets: '.four',
    width: 50,
    height: 50,
    rotate: 180,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' }).

  add({
    targets: '.d7',
    translateX: -50,
    duration: 300,
    easing: 'linear' }).

  add({
    targets: '.c2',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=250').
  add({
    targets: '.d5, .d8',
    translateX: 50,
    duration: 150,
    easing: 'linear' },
  '-=150').
  add({
    targets: '.c1',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=145').
  add({
    targets: '.d9',
    translateX: -50,
    duration: 150,
    easing: 'linear' },
  '-=290').
  add({
    targets: '.c3',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=250').
  add({
    targets: '.c4',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=250').
  add({
    targets: '.c5',
    opacity: 1,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 1,
    easing: 'linear' }).

  add({
    targets: '.c5',
    width: 0,
    height: 0,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' }).

  add({
    targets: '.d10',
    width: 4,
    height: 4,
    duration: 1,
    easing: 'linear' },
  '-=50').
  add({
    targets: '.c6',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=270').
  add({
    targets: '.d11',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=250').
  add({
    targets: '.d11',
    translateX: 50,
    translateY: 50,
    duration: 150,
    easing: 'linear' },
  '-=250').
  add({
    targets: '.d12',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=230').
  add({
    targets: '.d12',
    translateX: -50,
    translateY: -50,
    duration: 150,
    easing: 'linear' },
  '-=230').
  add({
    targets: '.d13',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d13',
    translateY: -42,
    duration: 150,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.c7, .c8',
    width: 30,
    height: 30,
    opacity: 0,
    translateX: ['-50%', '-50%'],
    translateY: ['-50%', '-50%'],
    duration: 300,
    easing: 'linear' },
  '-=70').
  add({
    targets: '.d14',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d14',
    translateX: 50,
    duration: 150,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d15',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d15',
    translateX: -50,
    duration: 150,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d16',
    opacity: 1,
    duration: 1,
    easing: 'linear' },
  '-=150').
  add({
    targets: '.d16',
    translateY: 42,
    duration: 150,
    easing: 'linear' },
  '-=150').
  add({
    targets: '.d13',
    width: 10,
    height: 10,
    right: -45,
    top: -5,
    duration: 200,
    easing: 'linear' },
  '-=350').
  add({
    targets: '.d13',
    width: 4,
    height: 4,
    right: -42,
    top: -2,
    duration: 200,
    easing: 'linear' }).

  add({
    targets: '.d16',
    width: 15,
    height: 15,
    left: -48,
    bottom: -7,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d16',
    width: 4,
    height: 4,
    left: -41,
    bottom: -2,
    duration: 200,
    easing: 'linear' }).

  add({
    targets: '.d3',
    width: 60,
    height: 60,
    left: -35,
    bottom: -35,
    duration: 200,
    easing: 'linear' },
  '-=180').
  add({
    targets: '.d1',
    width: 60,
    height: 60,
    left: -35,
    top: -35,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d4',
    width: 60,
    height: 60,
    right: -35,
    bottom: -35,
    duration: 200,
    easing: 'linear' },
  '-=210').
  add({
    targets: '.d2',
    width: 60,
    height: 60,
    right: -35,
    top: -35,
    duration: 200,
    easing: 'linear' },
  '-=210').
  add({
    targets: '.d17',
    opacity: 1,
    duration: 150,
    easing: 'linear' },
  '-=220').
  add({
    targets: '.d10',
    width: 36,
    height: 36,
    right: -85,
    bottom: -85,
    duration: 200,
    easing: 'linear' },
  '-=110').
  add({
    targets: '.d14',
    width: 36,
    height: 36,
    left: -17,
    bottom: -85,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d11',
    width: 36,
    height: 36,
    left: -67,
    bottom: -25,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d5',
    width: 36,
    height: 36,
    right: -35,
    bottom: -15,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d8',
    width: 36,
    height: 36,
    right: -35,
    top: -16,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d13',
    width: 36,
    height: 36,
    right: -85,
    top: -44,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d12',
    width: 36,
    height: 36,
    right: -66,
    top: -36,
    duration: 200,
    easing: 'linear' },
  '-=200').
  add({
    targets: '.d15',
    width: 36,
    height: 36,
    right: -16,
    top: -86,
    duration: 200,
    easing: 'linear' },
  '-=200').
.........完整代码请登录后点击上方下载按钮下载查看
点状loadding加载动画

网友评论0

div+csss实现4种方块伸缩loading加载动画效果代码

js+css实现表情变化loading加载进度动画效果代码

div+css实现药丸胶囊loading加载动画效果代码

three+vfx实现网页滚动文字炫酷过渡动画效果代码

div+css实现立体小球旋转loading加载动画效果代码

div+Css实现图片相册上下滚动入场动画效果代码

div+css实现页面滚动镜头聚焦虚化背景效果代码

gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码

css+div实现页面滚动驱动全屏左右栏图文切换效果代码

css+svg实现button按钮loading加载动画效果代码
