带有透明背景的CSS饼旋转器/加载器

创建一个带有透明背景的CSS饼旋转器/加载器可以通过CSS动画和渐变来实现。以下是一个简单的示例，展示了如何创建一个带有透明背景的CSS饼旋转器。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pie Spinner</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

解释

HTML结构：
- 创建一个简单的HTML结构，包含一个div元素，类名为spinner。
CSS样式：
- body样式设置了页面居中对齐，并去除了默认的margin。
- .spinner样式定义了旋转器的基本样式：
  - width和height设置为50px，使其成为一个正方形。
  - border设置为5px宽，颜色为透明，但顶部边框颜色设置为蓝色（#3498db）。
  - border-radius设置为50%，使其成为一个圆形。
  - animation属性应用了一个名为spin的关键帧动画，持续时间为1秒，线性重复。
- @keyframes spin定义了旋转动画，从0度旋转到360度。

这个示例创建了一个简单的蓝色饼旋转器，背景透明。你可以根据需要调整颜色、大小和动画速度。

进一步自定义

如果你想要更多的自定义选项，比如添加多个颜色的扇区，可以使用CSS渐变和伪元素来实现更复杂的效果。以下是一个示例：

.spinner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        red 0% 25%,
        blue 25% 50%,
        green 50% 75%,
        yellow 75% 100%
    );
    animation: spin 2s linear infinite;
}

这个示例使用conic-gradient创建了一个四色饼旋转器，每个扇区有不同的颜色。你可以根据需要调整颜色和动画速度。