如何创建仅CSS的动画加载程序？

创建一个仅使用HTML和CSS的动画加载器，首先在HTML中添加一个基础元素：

<div class="loader"></div>；2. 在CSS中通过设置宽高、边框、圆角和动画属性来实现旋转效果，利用border-top颜色差异和@keyframes从0到360度持续旋转；3. 可通过调整尺寸、动画速度、颜色或形状来自定义加载器样式，例如改为脉动圆点；4. 使用em/rem单位和Flex布局确保响应式适配；该方法无需JavaScript，轻量且兼容现代浏览器，适用于小型项目或备用加载状态。

Creating a CSS-only animated loader is a lightweight and effective way to show loading states without JavaScript. Here's how to make a simple spinning loader using just HTML and CSS.

1. Basic Structure (HTML)

Start with a minimal HTML structure. You only need one element:

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

This div will represent the loader on the page.

2. Styling the Loader (CSS)

Use CSS to create a circular spinner with animation. Here's a clean, modern loader:

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 50px auto; /* for centering */
}

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

How It Works

• Border technique: The loader uses a transparent interior with a light gray border all around, except the top (which is colored). This creates the "half-circle" effect.
• border-radius: 50%: Turns the square div into a perfect circle.
• animation: spin 1s linear infinite: Applies a continuous rotation.
• @keyframes spin: Rotates the element from 0 to 360 degrees repeatedly.

3. Customization Tips

You can easily tweak the appearance:

• Size: Adjust width and height.
• Speed: Change 1s in the animation to something faster (0.5s) or slower (2s).
• Colors: Modify border and border-top colors.
• Shape: Use border-radius: 0 and animate scale or opacity for a different effect (e.g., pulsing bar).

Example: Pulsing Dot Loader

.loader {
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  animation: pulse 0.8s ease-in-out infinite;
  margin: 50px auto;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

4. Make It Responsive

To ensure it works well in different containers:

• Use em or rem units for scalability.
• Center with display: flex if inside a wrapper:

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Final Notes

• No JavaScript required.
• Lightweight and fast-rendering.
• Works on all modern browsers.
• Ideal for small projects or fallback loading states.

Basically, just define a shape, apply a smooth animation using @keyframes, and let CSS do the rest.

以上是如何创建仅CSS的动画加载程序？的详细内容。更多信息请关注PHP中文网其他相关文章！