现代浏览器是否内置动画加载符号？欲基于HTML+CSS实现AJAX加载提示

好问题！现代浏览器完全支持纯HTML+CSS实现加载动画，不用依赖任何GIF或外部资源，完美契合你追求简洁的需求。下面给你几个实用且高效的方案：

1. 经典旋转加载圈（最常用） #

这是最常见的加载动画效果，利用CSS关键帧实现无限旋转，只需要一个简单的div元素：

<!-- HTML结构 -->
<div class="loader"></div>

<!-- CSS样式 -->
<style>
.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0; /* 浅色边框作为背景 */
  border-top: 4px solid #2563eb; /* 顶部蓝色边框突出旋转部分 */
  border-radius: 50%; /* 把方块变成圆形 */
  animation: spin 1s linear infinite; /* 无限循环旋转 */
}

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

你可以把这个.loader放在AJAX加载区域的上方，通过JavaScript控制它的显示/隐藏——加载开始时显示，请求完成后隐藏即可。

2. 双环错开旋转效果 #

如果想要更精致的视觉效果，试试双环旋转，同样是纯CSS实现：

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

<style>
.loader-dual {
  width: 40px;
  height: 40px;
  position: relative;
}

.loader-dual::before, .loader-dual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #ef4444;
  animation: spin 1s linear infinite;
}

.loader-dual::after {
  animation-delay: 0.5s; /* 延迟0.5秒，让两个环形成错开旋转的效果 */
}
</style>

3. 脉冲加载点（非旋转类） #

如果不喜欢旋转风格，还可以做脉冲跳动的加载点效果：

<div class="loader-pulse">
  <span></span>
  <span></span>
  <span></span>
</div>

<style>
.loader-pulse {
  display: flex;
  gap: 8px;
  align-items: center;
}

.loader-pulse span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #8b5cf6;
  animation: pulse 1.4s ease-in-out infinite both;
}

/* 给三个点设置不同的延迟，形成依次跳动的效果 */
.loader-pulse span:nth-child(1) { animation-delay: -0.32s; }
.loader-pulse span:nth-child(2) { animation-delay: -0.16s; }

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>

实用小技巧 #

• 可以给加载动画设置position: absolute，配合父元素的position: relative，让它居中显示在加载区域上方（比如加top: 50%; left: 50%; transform: translate(-50%, -50%);）。
• 通过JavaScript控制显示隐藏的示例：

  // 开始加载时显示
  document.querySelector('.loader').style.display = 'block';
  // AJAX请求完成后隐藏
  document.querySelector('.loader').style.display = 'none';
  

• 这些动画在所有现代浏览器（Chrome、Firefox、Safari、Edge）都能完美运行，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者guettli