类似时钟的加载中动画
效果：
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.loader-cont {
height: 240px;
width: 240px;
position: relative;
}
.dots {
height: 100%;
width: 100%;
border-radius: 50%;
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.dots>span {
content: '';
display: block;
height: 10px;
width: 10px;
background: white;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.dots:nth-child(2)>span {
top: calc(10px * 1);
}
.dots:nth-child(3)>span {
top: calc(10px * 2);
}
.dots:nth-child(4)>span {
top: calc(10px * 3);
}
.dots:nth-child(5)>span {
top: calc(10px * 4);
}
.dots:nth-child(6)>span {
top: calc(10px * 5);
}
.dots:nth-child(7)>span {
top: calc(10px * 6);
}
.dots:nth-child(8)>span {
top: calc(10px * 7);
}
.dots:nth-child(9)>span {
top: calc(10px * 8);
}
.dots:nth-child(10)>span {
top: calc(10px * 9);
}
.dots:nth-child(11)>span {
top: calc(10px * 10);
}
.dots:nth-child(12)>span {
top: calc(10px * 11);
}
style>
head>
<body>
<div class="loader-cont">
<div class="dots dot-one">
<span>span>
div>
<div class="dots dot-two">
<span>span>
div>
<div class="dots dot-three">
<span>span>
div>
<div class="dots dot-four">
<span>span>
div>
<div class="dots dot-five">
<span>span>
div>
<div class="dots dot-six">
<span>span>
div>
<div class="dots dot-seven">
<span>span>
div>
<div class="dots dot-eight">
<span>span>
div>
<div class="dots dot-nine">
<span>span>
div>
<div class="dots dot-ten">
<span>span>
div>
<div class="dots dot-eleven">
<span>span>
div>
<div class="dots dot-twelve">
<span>span>
div>
div>
body>
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'>script>
<script>
var tl = gsap.timeline({ defaults: { duration: 0.25, ease: "none" }, repeat: -1 });
tl.to(".dots:not(.dot-one)", { rotate: "+=30" });
tl.to(".dots:not(.dot-one):not(.dot-two)", { rotate: "+=30" });
tl.to(".dots.dot-two > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three)", { rotate: "+=30" });
tl.to(".dots.dot-three > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four)", { rotate: "+=30" });
tl.to(".dots.dot-four > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five)", { rotate: "+=30" });
tl.to(".dots.dot-five > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six)", { rotate: "+=30" });
tl.to(".dots.dot-six > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven)", { rotate: "+=30" });
tl.to(".dots.dot-seven > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight)", { rotate: "+=30" });
tl.to(".dots.dot-eight > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine)", { rotate: "+=30" });
tl.to(".dots.dot-nine > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten)", { rotate: "+=30" });
tl.to(".dots.dot-ten > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven)", { rotate: "+=30" });
tl.to(".dots.dot-eleven > span", { top: 0 }, "<");
tl.to(".dots:not(.dot-one):not(.dot-two):not(.dot-three):not(.dot-four):not(.dot-five):not(.dot-six):not(.dot-seven):not(.dot-eight):not(.dot-nine):not(.dot-ten):not(.dot-eleven):not(.dot-twelve)", { rotate: "+=30" });
tl.to(".dots.dot-twelve > span", { top: 0 }, "<");
tl.to(".dots.dot-one", { rotate: "+=30" });
tl.to(".dots.dot-one > span", { top: 110 }, "<");
tl.to(".dots.dot-one, .dots.dot-two", { rotate: "+=30" });
tl.to(".dots.dot-two > span", { top: 100 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three", { rotate: "+=30" });
tl.to(".dots.dot-three > span", { top: 90 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four", { rotate: "+=30" });
tl.to(".dots.dot-four > span", { top: 80 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five", { rotate: "+=30" });
tl.to(".dots.dot-five > span", { top: 70 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six", { rotate: "+=30" });
tl.to(".dots.dot-six > span", { top: 60 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven", { rotate: "+=30" });
tl.to(".dots.dot-seven > span", { top: 50 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight", { rotate: "+=30" });
tl.to(".dots.dot-eight > span", { top: 40 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine", { rotate: "+=30" });
tl.to(".dots.dot-nine > span", { top: 30 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten", { rotate: "+=30" });
tl.to(".dots.dot-ten > span", { top: 20 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven", { rotate: "+=30" });
tl.to(".dots.dot-eleven > span", { top: 10 }, "<");
tl.to(".dots.dot-one, .dots.dot-two, .dots.dot-three, .dots.dot-four, .dots.dot-five, .dots.dot-six, .dots.dot-seven, .dots.dot-eight, .dots.dot-nine, .dots.dot-ten, .dots.dot-eleven, .dots.dot-twelve", { rotate: "+=30" });
tl.to(".dots.dot-twelve > span", { top: 0 }, "<");
script>
html>