CSS Project: Crafting a Pure CSS Animated Custom Animated Circular Loader

Written by

FixTechToday

in

In the world of web development, creating engaging user experiences is paramount. One effective way to keep users informed and entertained while content loads is through the use of animated loaders. These visual cues not only indicate that something is happening in the background but also add a touch of polish and professionalism to your website. In this article, we’ll dive into crafting a pure CSS animated circular loader. This project is perfect for beginners and intermediate developers looking to expand their CSS skills and create visually appealing loading animations.

Why CSS Animated Loaders?

Before we jump into the code, let’s discuss why CSS is a great choice for creating loading animations:

  • Performance: CSS animations are generally hardware-accelerated, meaning they are handled by the browser’s graphics processing unit (GPU). This results in smoother and more efficient animations compared to JavaScript-based solutions.
  • Simplicity: CSS animations are declarative, making them easier to understand and implement. You define the animation’s properties and keyframes, and the browser handles the rest.
  • Maintainability: CSS animations are contained within your stylesheet, making them easier to manage and update compared to animations that require JavaScript code.
  • Accessibility: CSS animations can be easily adapted to meet accessibility standards, ensuring that users with disabilities can still experience your animations.

Project Setup: HTML Structure

Let’s start by setting up the basic HTML structure for our circular loader. We’ll use a simple `div` element with a specific class for styling. This class will allow us to target the loader with our CSS rules. The HTML is straightforward:

<div class="loader"></div>

This single `div` element will serve as the container for our circular loader. We’ll use CSS to shape it, color it, and animate it.

Styling the Loader: CSS Fundamentals

Now, let’s add some CSS to style our loader. We’ll start by making it a circle and giving it a basic appearance.

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3; /* Light gray border */
  border-top: 5px solid #3498db; /* Blue border for animation */
  border-radius: 50%; /* Makes it a circle */
  animation: spin 2s linear infinite; /* Animation properties */
}

Let’s break down these CSS properties:

  • `width` and `height`: These properties define the size of the loader. Adjust these values to change the size.
  • `border`: This property sets the border style, width, and color. We use a light gray color for the background border.
  • `border-top`: We use this to create the animated part of the circle. This sets the color of the top border.
  • `border-radius`: This property makes the `div` circular.
  • `animation`: This property links the animation named “spin” to the element. We define the duration, timing function, and iteration count.

Creating the Animation with Keyframes

The `animation` property references an animation named “spin”. We need to define this animation using `@keyframes`. Keyframes specify the animation’s behavior at different points in time.


@keyframes spin {
  0% { transform: rotate(0deg); } /* Start at 0 degrees rotation */
  100% { transform: rotate(360deg); } /* Rotate to 360 degrees */
}

In this `@keyframes` block:

  • `transform: rotate(0deg)`: At the start of the animation (0%), the element is not rotated.
  • `transform: rotate(360deg)`: At the end of the animation (100%), the element has rotated a full 360 degrees.

The `linear` timing function in the `animation` property ensures that the rotation happens at a constant speed.

Putting it All Together: Complete Code

Here’s the complete HTML and CSS code for the circular loader:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Circular Loader</title>
  <style>
    .loader {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      animation: spin 2s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="loader"></div>
</body>
</html>

Save this code as an HTML file (e.g., `loader.html`) and open it in your browser. You should see a spinning circular loader.

Customization: Colors, Sizes, and Speeds

One of the great things about CSS animations is their flexibility. Let’s explore how to customize our circular loader:

  • Changing Colors: Modify the `border-top` and `border` colors in the CSS to change the appearance. Experiment with different color combinations.
  • Adjusting Size: Change the `width` and `height` properties in the `.loader` class to resize the loader.
  • Modifying Speed: Change the `2s` value (the duration) in the `animation: spin 2s linear infinite;` property to speed up or slow down the animation. For example, `1s` will make it faster, and `4s` will make it slower.
  • Adding a Different Style of Border: Experiment with the `border-style` property, such as `dotted`, `dashed`, or `double`.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect `border-radius`: If the `border-radius` property is not set to `50%`, the loader will not be a perfect circle. Double-check this property.
  • Missing Keyframes: Ensure that your `@keyframes` block is correctly defined, with both a start (0%) and an end (100%) state.
  • Typographical Errors: Typos in CSS property names (e.g., `border-top` instead of `border-top`) or values can prevent the animation from working. Carefully review your code.
  • Incorrect Element Selection: If the animation isn’t working, make sure the CSS selector (.loader in our example) matches the HTML element’s class or ID.

Advanced Customization: Adding Multiple Colors and Effects

Let’s take our loader to the next level by adding more colors and a more dynamic effect. We will achieve this by adjusting the `border` properties and adding a slight delay.


.loader {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(0, 0, 0, 0.1); /* Light background border */
  border-left-color: #3498db; /* Blue color */
  border-right-color: #e74c3c; /* Red color */
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

In this modification:

  • We set a light background border using `rgba` to create a subtle gray.
  • We then applied distinct colors for the left and right border, creating a more visually appealing animation.
  • We adjusted the animation speed to give a slightly faster rotation.

Alternative Animation Techniques

While the rotating border is a common approach, there are other ways to create a circular loader:

  • Using `clip-path`: This technique involves using the `clip-path` property to reveal parts of a circle over time, creating a filling effect. This is a more advanced technique but can produce interesting results.
  • Using Multiple Elements: You can use multiple `div` elements, each with a different color and animation, to create more complex and visually rich loaders.
  • Using SVG: Scalable Vector Graphics (SVG) offer another powerful way to create loading animations, providing more flexibility and control over the visual appearance.

Accessibility Considerations

When implementing loading animations, it’s crucial to consider accessibility:

  • Provide Alternative Text: Use `aria-label` or `alt` attributes to provide descriptive text for the loader, so screen readers can convey its purpose to users with visual impairments.
  • Avoid Flashing: Ensure that the animation does not flash excessively, as this can trigger seizures in individuals with photosensitive epilepsy.
  • Offer a Way to Pause or Stop: If the animation is very long or distracting, provide a way for users to pause or stop it.
  • Keyboard Navigation: Ensure that the loader doesn’t interfere with keyboard navigation.

Summary: Key Takeaways

In this project, we’ve covered the essentials of creating a pure CSS animated circular loader. Here’s a summary of the key takeaways:

  • HTML Structure: A simple `div` element with a class is sufficient for the loader’s structure.
  • CSS Styling: We use CSS properties like `width`, `height`, `border`, `border-radius`, and `animation` to style and animate the loader.
  • Keyframes: The `@keyframes` rule defines the animation’s behavior over time.
  • Customization: You can easily customize the loader’s appearance, size, speed, and colors.
  • Accessibility: Always consider accessibility to ensure that your loader is usable by all users.

FAQ

Here are some frequently asked questions about CSS animated circular loaders:

  1. Can I use this loader on any website? Yes, the code is easily adaptable for any website project.
  2. How can I center the loader on the page? You can use CSS Flexbox or Grid to center the loader. For example, you can add the following styles to the `body` element: 
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
  3. Can I add text to the loader? Yes, you can add text inside the loader’s `div` element. However, you’ll need to adjust the CSS to position the text correctly, potentially using absolute positioning.
  4. How do I make the loader stop? You can remove the `animation` property from the `.loader` class to stop the animation. Alternatively, you can use JavaScript to toggle the animation on and off.
  5. Is it possible to make the loader responsive? Yes, you can make the loader responsive by using relative units (e.g., `em`, `rem`, or percentages) for the `width` and `height` properties, and by using media queries to adjust the loader’s size and behavior on different screen sizes.

Creating a CSS animated circular loader is a fundamental skill for any web developer. It demonstrates a solid understanding of CSS animations and provides a great way to improve the user experience. With the knowledge gained from this project, you can now add more engaging loading animations to your websites, making them more user-friendly and visually appealing. Remember to experiment with different colors, speeds, and effects to create unique loaders that match your website’s design. The key is to practice and explore different CSS properties and techniques. As you continue to build more projects, you’ll gain a deeper understanding of CSS animations and become more confident in your ability to create visually stunning and interactive web experiences. Keep coding and keep learning!

More posts