There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animations through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

Creating loading spinners with CSS is a straightforward way to enhance user experience while content loads. You don't need JavaScript for simple animations — just HTML and CSS. Below are practical methods to build basic and customized spinners.

Basic Spinner Using Borders

One of the simplest ways to create a spinner is by using a bordered element and rotating it with CSS animation.

HTML:

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

CSS:

 .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

• The border creates the ring shape.
• border-top-color gives the "loading" effect with a contrasting color.
• The spin keyframe rotates the element infinitely.

This method works well for small, subtle loaders.

Custom Spinner with Multiple Dots

If you want something more visual than a rotating circle, consider animating multiple dots that appear one after another.

HTML:

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

CSS:

 .dot-spinner {
  display: flex;
  gap: 5px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

• Each dot scales in and out at slightly different times.
• This staggered animation gives a pulsing or bouncing effect.
• You can change the number of dots or adjust timing for different styles.

This type of spinner is great for modern UIs where subtle motion adds personality.

Adding Animation to Buttons

Sometimes you want to show a spinner inside a button when an action is processing.

HTML:

 <button class="loading-btn">
  <span class="btn-text">Submit</span>
  <span class="spinner"></span>
</button>

CSS (partial):

 .loading-btn .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
}

.loading-btn.loading .spinner {
  display: inline-block;
}

.loading-btn.loading .btn-text {
  opacity: 0;
}

• When the button has a loading class, the spinner appears and the text fades out.
• You'd toggle the class using JavaScript when triggering an async action.

This approach keeps your interface responsive and give feedback during actions like form submission.

Tips for Customization

Here are some quick tips to make your spinners work better:

• Use semantic colors : Match the spinner color to your theme or brand.
• Keep it small : Spinners shouldn't dominate the screen unless necessary.
• Consider accessibility : Add ARIA attributes if needed ( aria-busy , role="status" ).
• Optimize performance : Avoid overcomplicated animations that may slow down rendering.

You can mix these techniques or layer them depending on your project's needs.

That's basically how you create and customize spinners with just CSS. It's not complicated, but getting the details right makes a difference in how smooth and professional your interface feels.

The above is the detailed content of CSS tutorial for creating loading spinners and animations. For more information, please follow other related articles on the PHP Chinese website!