Last Updated: 

Circle Spinner Loading with HTML and CSS

In the world of web development, creating engaging user interfaces is crucial. One way to enhance the user experience is by adding loading spinners, which provide visual feedback to users while content is being loaded. A circle spinner loading animation is a popular choice due to its simplicity and elegance. In this blog post, we will explore how to create a circle spinner loading animation using HTML and CSS. We'll cover the fundamental concepts, usage methods, common practices, and best practices.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

HTML Structure#

The basic HTML structure for a circle spinner loading animation consists of a container element that will hold the spinner. Inside the container, we can use a single div element to represent the spinner itself.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Spinner Loading</title>
  <link rel="stylesheet" href="styles.css">
</head>
 
<body>
  <div class="spinner-container">
    <div class="spinner"></div>
  </div>
</body>
 
</html>

CSS Styling#

To create the circle spinner, we'll use CSS to style the div element. We'll set the width and height to create a circular shape, add a border, and use CSS animations to make it spin.

/* styles.css */
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007BFF;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
}
 
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

In the CSS code above, we first center the spinner container using display: flex and justify-content: center and align-items: center. Then, we style the spinner itself. We set the width and height to create a square, and then use border-radius: 50% to turn it into a circle. We add a border with a semi-transparent color and a different color for the top border. Finally, we use the animation property to apply the spin animation, which rotates the spinner 360 degrees infinitely.

Usage Methods#

Basic Usage#

To use the circle spinner loading animation in your project, simply copy the HTML and CSS code above into your project files. You can adjust the size, colors, and animation speed by modifying the CSS properties.

Integrating with JavaScript#

You can use JavaScript to show and hide the spinner based on the loading state of your content. For example, you can show the spinner when an AJAX request starts and hide it when the request is completed.

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Circle Spinner Loading with JavaScript</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .spinner-container {
      display: none;
    }
  </style>
</head>
 
<body>
  <button id="load-data">Load Data</button>
  <div class="spinner-container">
    <div class="spinner"></div>
  </div>
  <div id="data-container"></div>
 
  <script>
    const loadDataButton = document.getElementById('load-data');
    const spinnerContainer = document.querySelector('.spinner-container');
    const dataContainer = document.getElementById('data-container');
 
    loadDataButton.addEventListener('click', () => {
      spinnerContainer.style.display = 'flex';
      // Simulate an AJAX request
      setTimeout(() => {
        dataContainer.innerHTML = 'Data loaded successfully!';
        spinnerContainer.style.display = 'none';
      }, 2000);
    });
  </script>
</body>
 
</html>

In the JavaScript code above, we first hide the spinner container by default. Then, when the "Load Data" button is clicked, we show the spinner container. After a 2-second delay (simulating an AJAX request), we update the data container with the loaded data and hide the spinner container again.

Common Practices#

Multiple Spinner Sizes#

You can create multiple spinner sizes by defining different CSS classes with different width and height values.

.spinner-small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
 
.spinner-large {
  width: 100px;
  height: 100px;
  border-width: 10px;
}

You can then use these classes in your HTML code:

<div class="spinner-container">
  <div class="spinner spinner-small"></div>
</div>
<div class="spinner-container">
  <div class="spinner spinner-large"></div>
</div>

Different Colors#

You can change the colors of the spinner by modifying the border and border-top-color properties. You can also use CSS variables to make it easier to change the colors globally.

:root {
  --spinner-color: #007BFF;
}
 
.spinner {
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--spinner-color);
}

You can then change the color by modifying the CSS variable:

body.dark-mode {
  --spinner-color: #FFFFFF;
}

Best Practices#

Accessibility#

Make sure to provide alternative text for the spinner if it is used in a context where screen readers are used. You can use the aria-label attribute on the spinner container.

<div class="spinner-container" aria-label="Loading...">
  <div class="spinner"></div>
</div>

Performance#

Keep the CSS animations simple to ensure good performance, especially on mobile devices. Avoid using too many complex animations or transitions that can slow down the page.

Compatibility#

Test your spinner on different browsers and devices to ensure compatibility. Some older browsers may not support CSS animations, so you may need to provide a fallback or use a polyfill.

Conclusion#

In this blog post, we have explored how to create a circle spinner loading animation using HTML and CSS. We covered the fundamental concepts, usage methods, common practices, and best practices. By following these guidelines, you can create engaging and accessible loading spinners for your web projects. Remember to test your spinners on different browsers and devices to ensure compatibility and good performance.

References#

2025-10