CREATE A LOADING SPINNER WITH HTML AND CSS
How to create a loading spinner with HTML and CSS?
- Use HTML to structure a loader.
- Use CSS to animate the loader.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
Source code of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loader</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<section>
<div class="dots">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
</div>
</section>
</body>
</html>
Save this code with .html extension.
Explanation
Structure Section:
- DOCTYPE: Declares the document type as HTML.
- html: The root of the document.
- lang=”en”: Specifies the language of the text as English.
- head: Contains information about the document but is not directly displayed.
- title: Set the title of the page, which here is “loader”.
- link: Link to an external stylesheet file named “Style.css”.
Body Section:
- body: Contains the visible content of the page.
- section: The main element of the section for collecting the following information.
- div: Storage element with class “dots” for styling.
- span*14: Fourteen individual span elements represent Points in the animation. Each span has a specific style implemented using the –i CSS switch, which may be defined in the connecting style.
Source code of CSS file.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
background: #323038;
}
section .dots span
{
position: absolute;
height: 10px;
width: 10px;
background: #ffffff;
border-radius: 50%;
transform: rotate(calc(var(--i) * (360deg/14))) translateY(35px);
animation: identifier 1.4s infinite;
animation-delay: calc(var(--i) * 0.1s );
opacity: 0;
}
@keyframes identifier
{
0%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
Explanation.
1. Global Style:
- *{status: 0; padding : 0 ; box-sizing: border-box;}: This resets the browser margins and default padding, and sets the box-sizing to border-box, ensuring a consistent element size in the browser.
2. Section Styling:
- section { … }: This defines the styles of the section element:
- display: flex; Set the settings to flexbox for maximum control over the position.
- align-objects: center; justify-content: center; Align content horizontally and vertically within a block.
- Height: 100vh; width: 100%; Set the segment to capture the height and width of the complete viewport.
- background: #323038; Set the background color to dark gray.
3. Dot Styles:
- section .dots span { … }: This defines the styles of the individual span elements that represent the dots:
- position: absolute; Position each point in absolute terms in the block element.
- height: 10px; width: 10px; Sets the size of each point as a 10px square.
- background: #ffffff; Set the background color to white.
- Border-radius: 50%; circle points.
- transform: rotate(calc(var(–i)*(360deg/14))) toY(35px); It uses the var(–i) variable to transform each point based on its index (from 1 to 14). Calculate the rotation angle for each point (360deg / 14 = 25.71deg per point). Use a fixed vertical definition of 35px to place points below the center.
- animation: identifier 1.4s infinite; Animates each point through the identifier animation for 1.4 seconds, repeating infinitely.
- animation-delay: calc(var(–i) * 0.1s ); Delays the start of animation for each point based on its index, creating a cascading effect.
- opacity: 0; initially hides points with opacity 0.
4. Animation Definition:
- @keyframes identifier { … }: This defines an animation called “identifier”:
- 0% { opacity: 1 ; } Set the opacity to 1 (0%) when the animation starts (0%).
- 100% { opacity : 0 ; } When the animation is complete (100%), set the opacity to 0 (fully transparent).
This code is a circular loading animation with 14 lines. As time delays a bit, points appear and disappear, creating the appearance of a smooth scale.
note:
- This specification assumes that the –i switch is set elsewhere in your HTML code to assign a unique value (from 1 to 14) to each point element.
Thanks for reading this article.