In web development, a good user experience often hinges on how we manage loading times.
In web development, a good user experience often hinges on how we manage loading times.
Posted inHTML CSS

Creating an Eye-Catching Loader with HTML and CSS

1

In web development, a good user experience often hinges on how we manage loading times. A well-designed loading animation can provide users with a sense of progress and keep them engaged while they wait. In this blog post, we’ll walk through a simple yet attractive loader created using HTML and CSS.

Understanding the Code

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A Simple Attractive Loader</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="techytechs-container">
    <div class="techytechs-loader"></div>
  </div>
</body>
</html>

In this HTML structure:

  • We start with a standard HTML5 document setup, including a <!DOCTYPE html> declaration, a language attribute, and a character set.
  • The <head> section contains a title and links to an external CSS stylesheet (styles.css).
  • The <body> includes a container (techytechs-container) that houses the loader (techytechs-loader). This encapsulation helps with styling and positioning.

CSS Styling

The accompanying CSS provides the visual design and animations:

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.techytechs-container
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #001d30;
  animation: UpdateBackgound 5s linear infinite;
}

.techytechs-loader
{
  position: absolute;
  width: 150px;
  height: 150px;
  background: linear-gradient(to top, #001d30 40%, #51eeee);
  border-radius: 50%;
  animation: RotateAnimation 2s linear infinite;
}

.techytechs-loader::before
{
  content: '';
  position: absolute;
  background: #001d30;
  inset: 20px 20px 0 0;
  border-radius: 50%;
}

.techytechs-loader::after
{
  content: '';
  position: absolute;
  top: 50px;
  right: -8px;
  width: 40px;
  height: 40px;
  background: #51eeee;
  border-radius: 50%;
  box-shadow: 0 0 5px #51eeee,
              0 0 25px #51eeee,
              0 0 50px #51eeee,
              0 0 75px #51eeee;
}

@keyframes UpdateBackgound
{
  to 
  {
    filter: hue-rotate(360deg);
  }
}

@keyframes RotateAnimation
{
  to 
  {
    transform: rotate(360deg);
  }
}

Breakdown of CSS

  1. Global Styles:

    • The universal selector (*) removes default margins and paddings and sets the box-sizing property to border-box. This helps in creating more predictable layouts.

  2. Container Styling:

    • The .techytechs-container is styled with flexbox, centering its contents both vertically and horizontally within the viewport. The min-height: 100vh ensures it occupies the full height of the screen. The background color is a dark blue (#001d30), and it features an animated hue rotation effect, giving it a dynamic look.

  3. Loader Styling:

    • The .techytechs-loader is a circular div that uses a linear gradient for its background. It rotates indefinitely, thanks to the RotateAnimation keyframes. The loader has a border-radius of 50%, making it circular.

  4. Pseudo-Elements:

    • The ::before pseudo-element creates a smaller dark circle inside the loader, while the ::after pseudo-element adds a glowing dot to the right side. The box-shadow property enhances its visual appeal, creating a glowing effect that draws attention.

  5. Animations:

    • Two keyframe animations are defined: UpdateBackgound for the container and RotateAnimation for the loader. The loader rotates 360 degrees continuously, while the background changes hue, adding a vibrant touch to the overall design.

Conclusion

This simple loader design is a great example of how you can enhance user experience with visually appealing elements. Using HTML and CSS, you can create an engaging loading animation that not only informs users that something is happening but also beautifies your web application.

Feel free to customize the colors, sizes, and animations to fit the aesthetic of your project! Happy coding!

Live Preview

You can see this loader in action by visiting the following link: View Loader Preview. Feel free to interact with the code and customize it to suit your needs!

Tags:

1 Comment

Leave a Reply

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