使用css实现一个loading的效果

.loading-container {
  width: 100px;
  height: 100px;
  position: relative; /* Needed for absolute positioning of children */
  margin: 20px auto; /* Center the container */
}

.loading-spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: spin 2s linear infinite; /* Animate the spinner */
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: #333;
}


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


/* Alternative loading styles - uncomment to use */

/* Dots Loading */
/*
.loading-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  margin: 0 5px;
  animation: bounce 1s infinite ease-in-out;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
*/

/* Bar Loading */
/*
.loading-bar {
  width: 100%;
  height: 10px;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden; /* Hide the animated bar outside the container */
}

.loading-bar-inner {
  width: 0%;
  height: 100%;
  background-color: #3498db;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}
*/

<!-- Spinner Loading -->
<div class="loading-container">
  <div class="loading-spinner"></div>
  <div class="loading-text">Loading...</div>
</div>

<!-- Dots Loading (Uncomment to use) -->
<!--
<div class="loading-dots">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
-->

<!-- Bar Loading (Uncomment to use) -->
<!--
<div class="loading-bar">
  <div class="loading-bar-inner"></div>
</div>
-->

This CSS provides three different loading animations:

• Spinner: A rotating circle with a loading text. This is the default active option.
• Dots: Three bouncing dots. Uncomment the relevant CSS and HTML to use.
• Bar: A progress bar that fills from left to right. Uncomment the relevant CSS and HTML to use.

Key improvements and explanations:

• Container: The .loading-container helps center and control the size of the loading animation.
• Comments: Clearer comments explain how to switch between different loading styles.
• Positioning: Uses position: relative and position: absolute along with transform: translate to perfectly center the "Loading..." text within the spinner.
• Alternative Styles: Provides commented-out code for two alternative loading styles (dots and bar), making it easy to switch between them. Just uncomment the desired style's CSS and HTML.
• Customization: Easily change colors, sizes, and animation speeds by modifying the CSS variables.

This revised answer provides a more versatile and easily customizable solution for creating loading animations using CSS. Remember to uncomment the desired loading style in both the CSS and HTML.