page loader with HTML and CSS by Sparkify Solutions

Create a loading spinner with HTML and CSS

Learn how to create a loading spinner

How to create a loading spinner with HTML and CSS?

  • Use HTML to structure a loader.
  • Use CSS to animate the loader.

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.

How to create a loader spinner with HTML and CSS?

By Sparkify Solutions.

Leave a Comment

Your email address will not be published. Required fields are marked *