Learn how to design a sleek circle loader for your website using HTML and CSS. Follow our step-by-step guide to add visual appeal to your loading screens.
Table of Contents
Circle loaders, also known as spinners or spinners, are animated graphical elements used to indicate that content is being loaded on a website. In this tutorial, we'll explore how to create a simple circle loader using HTML and CSS.
Source Code
Step 1 (HTML Code):
Begin by setting up the basic HTML structure for the loader. Use <div> elements to represent the loader container and individual circles.
Let's break down each part:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This tag defines the beginning of the HTML document and specifies the language as English (en).
3. <head>: This section contains meta-information about the document, such as its title, character encoding, viewport settings, and external resources like stylesheets and scripts.
- <meta charset="UTF-8">: This meta tag specifies the character encoding of the document as UTF-8, which supports a wide range of characters from various languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used for specifying the version of Internet Explorer rendering engine to use. Setting it to "IE=edge" instructs the browser to use the latest available rendering mode.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, which determines how the webpage is displayed on different devices. Here, it sets the width of the viewport to the device's width and sets the initial scale to 1.0, meaning it displays at its default size without zooming.
- <title>Circle Loader</title>: This sets the title of the webpage, which is displayed on the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external stylesheet (styles.css) to the HTML document. The stylesheet contains rules for the visual presentation of the HTML elements.
4. <body>: This section contains the content of the webpage that will be displayed in the browser.
- <div class="ring" data-text="Loading..."></div>: This is a <div> element with a class attribute set to "ring". This div represents the circle loader animation. The data-text attribute is used to specify the text displayed within the loader, which in this case is "Loading...". The actual animation and styling for the loader are defined in the linked stylesheet (styles.css).
Step 2 (CSS Code):
Style the circle element using CSS, adjusting its size, color, and positioning to achieve the desired appearance.
Let's go through the code step by step:
1. .ring: This is a class selector targeting elements with the class "ring".
2. --s: 50vmin;: This is a CSS custom property (--s) defined to set the size of the loader to 50% of the minimum viewport dimension (width or height).
3. --clr: #FFE681;: Another custom property (--clr) is defined to set the color of the loader to a light yellow (#FFE681).
4. --shd1: color-mix(in lab, var(--clr), #fff5);: This custom property (--shd1) defines a color mixture for drop shadows used in the loader.
5. --b1: 140% 145% 141% 166%; and --b2: 147% 200% 178% 150%;: These custom properties (--b1 and --b2) define the border radius values for the loader's animation.
6. border-radius: var(--b1);: Sets the border radius of the loader to the value defined in --b1.
7. border: 1px solid var(--clr);: Sets a 1px solid border around the loader with the color defined in --clr.
8. position: fixed;: Positions the loader relative to the viewport.
9. pointer-events: none;: Disables pointer events on the loader, allowing clicks to pass through it.
10. z-index: -100;: Sets the stacking order of the loader. Negative values place it behind other elements on the page.
11. width: var(--s); and height: var(--s);: Sets the width and height of the loader to the value defined in --s.
12. top: calc(50% - var(--s) / 2); and left: calc(50% - var(--s) / 2);: Positions the loader at the center of the viewport.
13. box-sizing: border-box;: Includes the border and padding in the loader's total width and height.
14. rotate: -55deg;: Rotates the loader by -55 degrees.
15. animation: Defines two animations (brd1 and rot) for the loader, specifying their durations, timing functions, and repetition behavior.
16. filter: Applies drop shadows to the loader using the color defined in --shd1.
17. The .ring:before and .ring:after selectors define pseudo-elements to create additional visual effects for the loader. They inherit properties from the main .ring class and have their animations and styles for border-radius, rotation, and content display.
18. Finally, the CSS rules for the body element set the minimum height of the body to the full viewport height, remove margins, and set a radial gradient background, and define text color.
.ring {
--s: 50vmin;
--clr: #FFE681;
--shd1: color-mix(in lab, var(--clr), #fff5);
--b1: 140% 145% 141% 166%;
--b2: 147% 200% 178% 150%;
border-radius: var(--b1);
border: 1px solid var(--clr);
position: fixed;
pointer-events: none;
z-index: -100;
width: var(--s);
height: var(--s);
top: calc(50% - var(--s) / 2);
left: calc(50% - var(--s) / 2);
box-sizing: border-box;
rotate: -55deg;
animation: brd1 1s infinite linear alternate, rot 30s infinite linear forwards;
filter: drop-shadow(0 0 1vmin var(--shd1)) drop-shadow(0.1em 0.1em 0.05em var(--shd1)) drop-shadow(-0.1em -0.1em 0.05em var(--shd1));
}
.ring:before, .ring:after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0;
border: inherit;
}
.ring:before {
--b2: 185% 158% 160% 150%;
--b1: 147% 200% 178% 150%;
border-radius: var(--b1);
rotate: 55deg;
animation: brd1 1.5s infinite linear alternate, rot 30s infinite linear forwards reverse;
content: attr(data-text);
display: grid;
place-content: center;
align-content: center;
font-family: system-ui, sans-serif;
font-size: calc(var(--s) / 10);
text-shadow: 1px 1px 0.5em #000;
}
.ring:after {
--b1: 185% 158% 160% 150%;
--b2: 140% 145% 141% 166%;
border-radius: var(--b1);
rotate: 35deg;
animation: brd1 2s infinite linear alternate, rot 40s infinite linear forwards reverse;
}
@keyframes brd1 {
to {
border-radius: var(--b2);
}
}
@keyframes rot {
to {
transform: rotatez(360deg);
}
}
body {
min-height: 100vh;
margin: 0;
background-image: radial-gradient(circle at center, #2E4755, #1f2020);
color: #fefefe;
} Final Output:
Conclusion:
Creating a circle loader using HTML and CSS offers a simple yet effective way to enhance user experience on websites. By following this tutorial, you can customize loaders to match your site's design and provide visual feedback during content loading. Experiment with different styles and animations to create unique loaders that elevate your website's aesthetics.
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 😊
