CSS Loading Spinner Template: Animated Circles and Bars in Rotation

📝 Usage

This template is used to create a loading spinner, such as a rotating circle or bar animation.

Demo GIF

📘 Explanation

This code uses `@keyframes` to create a rotating circle (`spinner-circle`) and a sliding bar (`spinner-bar`). You can adjust the speed and color of the animation as needed.

🔹 Partial Code

<style>
  /* Rotating Circle */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* Rotating Bar */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

💻 Full Working Code

<div class="spinner-circle"></div>

<div class="spinner-bar"></div>

<style>
  /* Rotating Circle */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* Rotating Bar */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

Copied!

🌀 Practical Techniques for Using Loading Spinners

Loading spinners created with CSS animations are important UI elements that help users comfortably endure waiting times. Proper customization allows you to create effects that match your brand image.

🎨 Design Customization

Building upon the basic rotation animation, changing the border-top-color to a gradient gives a modern impression. Additionally, adding animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1) creates a more natural movement. The color can be changed not only from #3498db (blue) but also to match the site’s theme colors.

⏱️ Performance Optimization

To maintain smooth animations, adding the will-change: transform property is recommended. When displaying multiple spinners, staggering the animation-delay creates a visually rich staggered effect.

📱 Responsive Design

On mobile devices, reducing the size (width: 30px) and shortening the animation duration (animation-duration: 1s) allows for compact and efficient display. For dark-themed backgrounds, adjust the border-color to a lighter color.

Loading spinners are important for enhancing user experience, but care should be taken not to overcomplicate them or have them display for too long. Aim for simple, clear designs that fit the overall atmosphere of your site.