Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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">







<!-- github  -->
<a href="https://github.com/alikinvv/dots-loader" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#000; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
              
            
!

CSS

              
                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%;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;

	.dot {
		width: 4px;
		height: 4px;
		background: #fff;
		border-radius: 50%;
		position: absolute;

		&.d1 { left: -2px; top: -2px; }
		&.d2 { right: -2px; top: -2px; }
		&.d3 { left: -2px; bottom: -2px; }
		&.d4 { right: -2px; bottom: -2px; }
		&.d5 { right: -2px; bottom: -2px; }
		&.d7 { left: -2px; bottom: -2px; }
		&.d8 { right: -2px; top: -2px; }
		&.d9 { left: -2px; top: -2px; }
		&.d10 { right: -42px; bottom: -42px; width: 0; height: 0; }
		&.d11 { left: -52px; bottom: -2px; opacity: 0 }
		&.d12 { right: -52px; top: -2px; opacity: 0 }
		&.d13 { right: -52px; top: -2px; opacity: 0 }
		&.d14 { left: -2px; bottom: -52px; opacity: 0 }
		&.d15 { right: -2px; top: -52px; opacity: 0 }
		&.d16 { left: -52px; bottom: -2px; opacity: 0 }
		&.d17 { right: 88px; top: -44px; opacity: 0 }
		&.d18 { left: 47px; bottom: -51px; opacity: 0 }
		&.d19 { bottom: -51px; left: -2px; opacity: 0 }
		&.d20 { left: -51px; bottom: -2px; opacity: 0 }
		&.d21 { left: -52px; top: -1px; opacity: 0 }
		&.d22 { top: -52px; right: -2px; opacity: 0 }
		&.d23 { right: 48px; top: -52px; opacity: 0 }
		&.d24 { right: -50px; bottom: 48px; opacity: 0 }
		&.d25 { right: -51px; top: 47px; opacity: 0 }
	}

	.circle {
		width: 4px;
		height: 4px;
		border: 2px solid #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform-origin: 0 0;
		transform: translate(-50%, -50%);

		&.c5 {
			width: 30px;
			height: 30px;
			opacity: 0;
		}
	}
}

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

              
            
!

JS

              
                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')
    .add({
        targets: '.d17',
        width: 36,
        height: 36,
        right: 102,
        top: -85,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d16',
        width: 36,
        height: 36,
        left: -85,
        bottom: -43,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d9',
        width: 36,
        height: 36,
        left: -35,
        top: -15,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d7',
        width: 36,
        height: 36,
        left: -35,
        bottom: -17,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d4',
        width: 36,
        height: 36,
        right: -17,
        bottom: -17,
        duration: 200,
        easing: 'linear',
    }, '-=110')
    .add({
        targets: '.d3',
        width: 36,
        height: 36,
        left: -17,
        bottom: -17,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d2',
        width: 36,
        height: 36,
        right: -17,
        top: -17,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d1',
        width: 36,
        height: 36,
        left: -17,
        top: -17,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d18',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d18',
        translateY: 70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d19',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d19',
        translateY: 70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d20',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d20',
        translateX: -70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d21',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d21',
        translateX: -70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d22',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d22',
        translateY: -70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d23',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d23',
        translateY: -70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d24',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d24',
        translateX: 70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d25',
        opacity: 1,
        duration: 1,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d25',
        translateX: 70,
        duration: 150,
        easing: 'linear',
    }, '-=250')
    .add({
        targets: '.d24',
        translateX: 50,
        width: 12,
        height: 12,
        bottom: 42,
        right: -56,
        duration: 200,
        easing: 'linear',
    }, '-=100')
    .add({
        targets: '.d25',
        translateX: 50,
        width: 12,
        height: 12,
        top: 42,
        right: -56,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d20',
        translateX: -50,
        width: 12,
        height: 12,
        bottom: -9,
        left: -56,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d21',
        translateX: -50,
        width: 12,
        height: 12,
        top: -7,
        left: -56,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d22',
        translateY: -50,
        width: 12,
        height: 12,
        top: -58,
        right: -7,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d23',
        translateY: -50,
        width: 12,
        height: 12,
        right: 42,
        top: -57,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d18',
        translateY: 50,
        width: 12,
        height: 12,
        left: 41,
        bottom: -56,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d19',
        translateY: 50,
        width: 12,
        height: 12,
        left: -9,
        bottom: -57,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d14',
        width: 22,
        height: 22,
        left: -14,
        bottom: -62,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d11',
        width: 22,
        height: 22,
        left: -63,
        bottom: -12,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d16',
        width: 22,
        height: 22,
        left: -61,
        bottom: -20,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d7',
        width: 22,
        height: 22,
        left: -11,
        bottom: -13,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d9',
        width: 22,
        height: 22,
        left: -11,
        top: -11,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d17',
        width: 22,
        height: 22,
        right: 85,
        top: -61,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d15',
        width: 22,
        height: 22,
        right: -12,
        top: -62,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d12',
        width: 22,
        height: 22,
        right: -62,
        top: -12,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d13',
        width: 22,
        height: 22,
        right: -61,
        top: -20,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d8',
        width: 22,
        height: 22,
        right: -11,
        top: -12,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d5',
        width: 22,
        height: 22,
        right: -11,
        bottom: -11,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d10',
        width: 22,
        height: 22,
        right: -61,
        bottom: -61,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d19',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '+=300')
    .add({
        targets: '.d18',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d25',
        width: 4,
        height: 4,
        right: 24,
        top: 22,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d24',
        width: 4,
        height: 4,
        right: 24,
        bottom: 24,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d22',
        width: 4,
        height: 4,
        right: 24,
        top: 22,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d23',
        width: 4,
        height: 4,
        right: 24,
        top: 22,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d21',
        width: 4,
        height: 4,
        left: 22,
        top: 22,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d20',
        width: 4,
        height: 4,
        left: 22,
        bottom: 24,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d11',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=100')
    .add({
        targets: '.d14',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d9',
        width: 4,
        height: 4,
        left: 24,
        top: 24,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d7',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d16',
        width: 4,
        height: 4,
        left: 24,
        bottom: 22,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d17',
        width: 4,
        height: 4,
        right: 22,
        top: 24,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d15',
        width: 4,
        height: 4,
        right: 22,
        top: 24,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d10',
        width: 4,
        height: 4,
        right: 22,
        bottom: 22,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d5',
        width: 4,
        height: 4,
        right: 22,
        bottom: 22,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d8',
        width: 4,
        height: 4,
        right: 22,
        top: 24,
        translateX: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d13',
        width: 4,
        height: 4,
        right: 22,
        top: 24,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d12',
        width: 4,
        height: 4,
        right: 22,
        top: 24,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d12, .d12, .d13, .d11, .d18, .d19, .d8, .d5, .d10, .d15, .d20, .d21, .d23, .d22, .d24, .d25, .d17, .d16, .d7, .d9, .d14',
        opacity: 0,
        duration: 1,
    })
    .add({
        targets: '.d1',
        width: 4,
        height: 4,
        left: -2,
        top: -2,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=100')
    .add({
        targets: '.d2',
        width: 4,
        height: 4,
        right: -2,
        top: -2,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d3',
        width: 4,
        height: 4,
        left: -2,
        bottom: -2,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.d4',
        width: 4,
        height: 4,
        right: -2,
        bottom: -2,
        translateX: 0,
        translateY: 0,
        duration: 200,
        easing: 'linear',
    }, '-=200')
    .add({
        targets: '.four',
        width: 0,
        height: 0,
        rotate: {
            value: 0, duration: 1
        },
        duration: 200,
        easing: 'linear',
    }, '-=200')

    controlsProgressEl.addEventListener('input', () => {
        tl.seek(tl.duration * (controlsProgressEl.value / 100));
    });
});

              
            
!
999px

Console