SOURCE

console 命令行工具 X clear

                    
>
console
var p = document.getElementById("percentage")
var tl = new TimelineMax({ repeat: -1, repeatDelay: 1,
                         onRepeat: function() { p.innerHTML = "0" }})
var tl2 = new TimelineMax({ repeat: -1 })
var tl3 = new TimelineMax({ repeat: -1 })
var tl4 = new TimelineMax({ repeat: -1 })

TweenMax.set(".bar", { scaleY: 0, transformOrigin: "50% 100%"})
TweenMax.set("#loader", { opacity: 0, scale: 0.8, transformOrigin: "50% 50%" })
TweenMax.set("#ring1", { transformOrigin: "50% 50%" })
TweenMax.set("#ring2", { transformOrigin: "50% 50%" })
TweenMax.set("#ring3", { rotation: -95, transformOrigin: "50% 50%" })
TweenMax.set("#percentage-container", { transformOrigin: "50% 50%" })

tl.to("#loader", 1, { opacity: 1, scale: 1 })
tl.from("#percentage-container", 0.5, { x: -20, opacity: 0 }, "a")
tl.add(TweenMax.to(".bar", 5, {
  scaleY: 1, ease: Linear.easeNone,
  onUpdate: function() {
    p.innerHTML = Math.floor(this.progress() * 100)
  }
}), "a")
tl.to("#percentage-container", 0.5, { scale: 1.2, opacity: 0 })
tl.to("#loader", 0.5, { opacity: 0, scale: 1.2 })

tl2.to("#ring1", 10, { rotation: 360, ease: Linear.easeNone })
tl3.to("#ring2", 5, { rotation: -360, ease: Linear.easeNone })
tl4.to("#ring3", 2.5, { rotation: -455, ease: Power3.easeInOut })
<div class="container">
	<svg viewBox="0 0 400 200" width=100%>
		<defs>
			<mask id="text-mask">
				<text x="50%" y="135" text-anchor="middle" font-size="120" fill="white">loading</text>
			</mask>
			<mask id="outline-mask">
				<text x="50%" y="135" text-anchor="middle" font-size="120" fill="transparent" stroke="white" stroke-width=1>loading</text>
			</mask>
		</defs>
		<g id="loader">
			<circle id="ring1" cx=50% cy=50% r=75 fill="none" stroke="hsl(0,0%,80%)" stroke-dasharray="14 14"></circle>
			<circle id="ring2" cx=50% cy=50% r=60 fill="none" stroke="hsl(0,0%,80%)" stroke-width=10 stroke-dasharray="80 400"></circle>
			<circle id="ring3" cx=50% cy=50% r=80 fill="none" stroke="hsl(0,0%,80%)" stroke-width=5 stroke-dasharray="20 500"></circle>
			<g id="percentage-container">
				<text id="percentage" x=322 y=65 font-size=30 fill="#666" text-anchor="end">0</text>
				<text x=327 y=53 font-size=15 fill="#666" text-anchor="start">%</text>
			</g>
			<g mask="url(#text-mask)">
				<rect x=0 y=50 width="100%" height=110 fill="hsl(0,0%,90%)"></rect>
				<rect class="bar" x=0 y=50 width="100%" height=110 fill="hsl(200,60%,50%)" stroke="hsl(200,60%,40%)"></rect>
			</g>
			<text x="50%" y="135" text-anchor="middle" font-size="120" fill="transparent" stroke="hsl(0,0%,80%)" stroke-width=1>loading</text>
			<g mask="url(#outline-mask)">
				<rect class="bar" x=0 y=50 width="100%" height=110 fill="hsl(200,60%,40%)" stroke="hsl(200,60%,40%)"></rect>
			</g>
		</g>
	</svg>
</div>
@import url('https://fonts.googleapis.com/css?family=Ranga:700');

html, body {
  height: 100%;
  font-family: Ranga;
  background-color: hsl(200,50%,95%);
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

本项目引用的自定义外部资源