In this tutorial, we’ll be creating Squid Game-inspired loaders using HTML and CSS animations. These loaders represent the iconic shapes from the popular Netflix series: Circle, Triangle, and Square. By leveraging SVGs and stroke animations, we’ll make these shapes animate in a visually appealing way.
By the end of this tutorial, you will have a set of smooth, looping loaders that can be used in various projects.
![](https://codeymaze.com/wp-content/uploads/2025/01/Squid-Game-Loaders-1024x576.png)
HTML Structure
We start by defining a simple HTML structure where each loader is wrapped inside a div with a class of loader. Each loader contains an SVG shape.
- The Circle Loader is created using the <circle> element.
- The Triangle Loader is built with the <polygon> element.
- The Square Loader uses the <rect> element.
Each SVG shape is wrapped in a div.loader, which helps apply unique styles and animations to each one. The viewBox attribute in the <svg> tag ensures the shapes scale properly.
CSS Animations & Key Techniques
1. Basic Styling
We set a dark background to match the Squid Game aesthetic and center the loaders using flexbox. We also define a –path CSS variable for the stroke color, making customization easier.
2. SVG Stroke Animations
Instead of filling the shapes with color, we use strokes. The animation is achieved using:
- stroke-dasharray: Defines a dashed stroke pattern.
- stroke-dashoffset: Controls the position of the dashes, creating the illusion of movement.
Each shape has its own stroke-dasharray value to match its unique geometry.
3. Keyframes Animations
- Triangle Animation: Uses stroke-dashoffset values that progressively increase to create a drawing effect.
- Square Animation: Similar technique but adapted for the square’s four sides.
- Circle Animation: Adjusts stroke-dashoffset values to make the circular stroke appear to rotate.
4. Color Variations
Each shape is assigned a distinct color using CSS variables:
- Circle: Orange (#ff4500)
- Triangle: Green (#32cd32)
- Square: Blue (#1e90ff)
These colors can be easily modified to fit different design themes.
Source Code
<div class="loader circle">
<svg viewBox="0 0 80 80">
<circle cx="40" cy="40" r="32"></circle>
</svg>
</div>
<div class="loader triangle">
<svg viewBox="0 0 86 80">
<polygon points="43 8 79 72 7 72"></polygon>
</svg>
</div>
<div class="loader rect">
<svg viewBox="0 0 80 80">
<rect x="8" y="8" width="64" height="64"></rect>
</svg>
</div>
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
background: black;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.loader {
--path: #ffffff;
--duration: 3s;
width: 44px;
height: 44px;
position: relative;
}
.loader svg {
display: block;
width: 100%;
height: 100%;
}
.loader svg rect,
.loader svg polygon,
.loader svg circle {
fill: none;
stroke: var(--path);
stroke-width: 10px;
stroke-linejoin: round;
stroke-linecap: round;
}
.loader svg polygon {
stroke-dasharray: 145 76 145 76;
stroke-dashoffset: 0;
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg rect {
stroke-dasharray: 192 64 192 64;
stroke-dashoffset: 0;
animation: pathRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg circle {
stroke-dasharray: 150 50 150 50;
stroke-dashoffset: 75;
animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader.circle {
--path: #ff4500;
}
.loader.triangle {
--path: #32cd32;
}
.loader.rect {
--path: #1e90ff;
}
@keyframes pathTriangle {
33% {
stroke-dashoffset: 74;
}
66% {
stroke-dashoffset: 147;
}
100% {
stroke-dashoffset: 221;
}
}
@keyframes pathRect {
25% {
stroke-dashoffset: 64;
}
50% {
stroke-dashoffset: 128;
}
75% {
stroke-dashoffset: 192;
}
100% {
stroke-dashoffset: 256;
}
}
@keyframes pathCircle {
25% {
stroke-dashoffset: 125;
}
50% {
stroke-dashoffset: 175;
}
75% {
stroke-dashoffset: 225;
}
100% {
stroke-dashoffset: 275;
}
}
Wrapping Up
Using SVG stroke animations, we’ve successfully created loaders inspired by Squid Game’s iconic symbols. These loaders run smoothly and can be customized by adjusting stroke properties, colors, and animation timing.
Feel free to tweak the animations, add more shapes, or use these loaders in your projects!