Learn how to create amazing Squid Game-inspired loaders using pure CSS and HTML markup. Follow our step-by-step guide for CSS animations that will make your website stand out.
Table of Contents
Loaders are one of the classic components used to create an attractive website. They are very simple to make and can be used as animations
Squid Game is a popular Netflix series that has taken the world by storm. It has inspired a wide range of designs, including Squid Game-inspired loaders that can be created using HTML and CSS. In this article, we'll show you how to create amazing pure CSS Squid Game loaders for your website.
Let's start making these amazing squid game-inspired loaders Using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File. We'll be using SVG in this project. In this file, we will include the main structure for our loaders.
The first loader is a circle loader, which is represented by a div element with a class of "loader" containing an SVG element with a circle element inside it. The viewBox attribute defines the dimensions of the SVG view box, while the cx, cy, and r attributes define the position and size of the circle.
The second loader is a triangle loader, which is represented by a div element with a class of "loader triangle" containing an SVG element with a polygon element inside it. The viewBox attribute defines the dimensions of the SVG view box, while the points attribute defines the vertices of the polygon.
The third loader is a square loader, which is represented by a div element with a class of "loader" containing an SVG element with a rect element inside it. The viewBox attribute defines the dimensions of the SVG view box, while the x, y, width, and height attributes define the position and size of the rectangle.
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our loader using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the loaders is in place, the next step is to add styling and animations to the loaders using CSS. CSS allows us to control the visual appearance of the loaders, including things like layout, color, and animations.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our loaders.
The CSS portion of the code starts with html, which is setting the -webkit-font-smoothing property to antialiased, a technique used to smooth the edges of text to make it appear clearer on digital displays.
The * selector is used to apply the following box-sizing property to all elements in the HTML document, which is set to border-box. This includes the :before and :after pseudo-elements.
The body selector applies a few properties to the page's body, setting its min-height to 100vh (100% of the viewport height), and its background color to a light shade of pink. display: flex is used to create a flexbox container, with justify-content and align-items properties set to center, centering the elements inside.
The .loader class selector is then used to create the main shape of the loader animation. It is an inline block element that is relatively positioned, with a fixed width and height, and a few --path and --dot variables set for the stroke and dot colors of the animation. The :before pseudo-element is used to create the animated dot on the left side of the shape. The svg element is also used to define the other shapes used in the animation: a rectangle, a polygon (triangle), and a circle.
The following .loader svg selectors target the rect, polygon, and circle elements within the svg, respectively. Each shape has its fill property set to none, and stroke properties are set to a --path variable color, with a width of 10 pixels and rounded caps and joins. Each shape also has an animated stroke-dasharray and stroke-dashoffset, which work together to create the animation effect. These animations are created using @keyframes and -webkit-keyframes rules.
Finally, the .loader.triangle class selector modifies the original .loader class to create a slightly different shape of the loader animation, and its :before pseudo-element uses different animation rules to animate its dot.
This will give our loaders an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #ebc5c5;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
--path: #2F3545;
--dot: #5628EE;
--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;
}
} Final Output:
Conclusion:
In conclusion, Squid Game-inspired loaders are a great way to make your website stand out. Creating them using pure CSS and HTML markup is easy and can be done by anyone with basic web development skills. We hope this article has been helpful in teaching you how to create Squid Game loaders for your website. Remember, the possibilities are endless when it comes to creating advanced loaders using HTML and CSS, so don't be afraid to get creative!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
