Squid Game CSS Loaders Using Pure HTML & CSS

Loaders play a huge role in enhancing the visual appeal and user experience of a website. Simple yet eye-catching animations can make your interface look more polished and engaging. Inspired by the popular Netflix series Squid Game, we’ll walk you through how to build stylish SVG-based loaders using pure HTML and CSS—no JavaScript required.

These animations replicate the iconic circle, triangle, and square shapes seen in the show. By the end of this tutorial, you’ll be able to integrate these smooth, looping loaders into any project to create a more dynamic user interface.

Project Introduction

The goal of this tutorial is to help you create three Squid Game-inspired loaders using only HTML and CSS. Each loader uses an SVG shape—circle, triangle, and square—combined with CSS animations for a modern, minimalistic effect.

Whether you’re a beginner or intermediate developer, these loaders make a great addition to your UI animation toolkit.

HTML Code for Squid Game CSS Loaders

We’ll start by setting up the HTML file. All three loaders are built using SVG elements wrapped inside a .loader container. Each one includes a different geometric shape:

Circle Loader using <circle>
Triangle Loader using <polygon>
Square Loader using <rect>

Simply create your HTML file (e.g., index.html) and paste the code below without modification:

<!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>Squid Game-Inspired Loader</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="loader">
        <svg viewBox="0 0 80 80">
            <circle id="test" 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">
        <svg viewBox="0 0 80 80">
            <rect x="8" y="8" width="64" height="64"></rect>
        </svg>
    </div>
</body>
</html>

CSS Code for Squid Game CSS Loaders

Next, we’ll style and animate the SVG shapes using CSS. This is where the magic happens—stroke animations, moving dots, and smooth transitions bring each loader to life.

Create a separate styles.css file and paste the following code exactly as it appears:

html {
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #f44786;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  --path: #091229;
  --dot: #3006ba;
  --duration: 3s;
  width: 44px;
  height: 44px;
  position: relative;
  display: inline-block;
  margin: 0 16px;
}
.loader:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  display: block;
  background: var(--dot);
  top: 37px;
  left: 19px;
  transform: translate(-18px, -18px);
  -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.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;
  -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          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;
  -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader svg circle {
  stroke-dasharray: 150 50 150 50;
  stroke-dashoffset: 75;
  -webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
.loader.triangle {
  width: 48px;
}
.loader.triangle:before {
  left: 21px;
  transform: translate(-10px, -18px);
  -webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
          animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@-webkit-keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }
  66% {
    stroke-dashoffset: 147;
  }
  100% {
    stroke-dashoffset: 221;
  }
}

@keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }
  66% {
    stroke-dashoffset: 147;
  }
  100% {
    stroke-dashoffset: 221;
  }
}
@-webkit-keyframes dotTriangle {
  33% {
    transform: translate(0, 0);
  }
  66% {
    transform: translate(10px, -18px);
  }
  100% {
    transform: translate(-10px, -18px);
  }
}
@keyframes dotTriangle {
  33% {
    transform: translate(0, 0);
  }
  66% {
    transform: translate(10px, -18px);
  }
  100% {
    transform: translate(-10px, -18px);
  }
}
@-webkit-keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }
  50% {
    stroke-dashoffset: 128;
  }
  75% {
    stroke-dashoffset: 192;
  }
  100% {
    stroke-dashoffset: 256;
  }
}
@keyframes pathRect {
  25% {
    stroke-dashoffset: 64;
  }
  50% {
    stroke-dashoffset: 128;
  }
  75% {
    stroke-dashoffset: 192;
  }
  100% {
    stroke-dashoffset: 256;
  }
}
@-webkit-keyframes dotRect {
  25% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(18px, -18px);
  }
  75% {
    transform: translate(0, -36px);
  }
  100% {
    transform: translate(-18px, -18px);
  }
}
@keyframes dotRect {
  25% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(18px, -18px);
  }
  75% {
    transform: translate(0, -36px);
  }
  100% {
    transform: translate(-18px, -18px);
  }
}
@-webkit-keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }
  50% {
    stroke-dashoffset: 175;
  }
  75% {
    stroke-dashoffset: 225;
  }
  100% {
    stroke-dashoffset: 275;
  }
}
@keyframes pathCircle {
  25% {
    stroke-dashoffset: 125;
  }
  50% {
    stroke-dashoffset: 175;
  }
  75% {
    stroke-dashoffset: 225;
  }
  100% {
    stroke-dashoffset: 275;
  }
}

Preview

These animated loaders mimic the iconic Squid Game shapes in a clean and modern way. Once added to your project, they create a visually appealing loading effect suitable for landing pages, dashboards, portfolios, or games.

Squid Game CSS Loaders Using Pure HTML & CSS

Conclusion

Squid Game CSS loaders are an excellent way to add personality to your website while keeping everything built in pure HTML and CSS. With SVG shapes and CSS animations, you can create endless variations of smooth, engaging loaders. Feel free to customize timing, colors, and shapes to suit your project’s aesthetic.

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company

Top 5 This Week

Related Posts

Squid Game CSS Loaders Using Pure HTML & CSS

Project Introduction

HTML Code for Squid Game CSS Loaders

CSS Code for Squid Game CSS Loaders

Preview

Conclusion

LEAVE A REPLY Cancel reply

Popular Articles

About us

Latest Articles

Most Popular