CSS怎样制作加载进度圆环动画？conic-gradient渐变

conic-gradient

conic-gradient

@keyframes

conic-gradient

div

<div class="loading-progress-ring">
    <span class="progress-value">0%</span>
</div>

.loading-progress-ring {
    /* 定义一些CSS变量，让样式调整更灵活 */
    --current-progress: 0; /* 初始进度百分比 */
    --ring-size: 150px; /* 圆环的整体尺寸 */
    --ring-thickness: 12px; /* 圆环的厚度 */
    --fill-color: #6a1b9a; /* 进度条的填充色，我喜欢紫色 */
    --empty-color: #e0e0e0; /* 未填充部分的颜色 */
    --text-color: #333; /* 文本颜色 */
    --animation-duration: 2s; /* 动画时长 */

    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%; /* 确保是圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* 用于内部文本定位 */
    overflow: hidden; /* 防止内容溢出，尽管在这里不那么关键 */

    /* 
     * 核心魔法：使用多层背景。
     * 第一层 (radial-gradient) 用来“挖空”中心，形成圆环的内边缘。
     * 第二层 (conic-gradient) 才是真正的进度条。
     */
    background:
        /* 径向渐变，从中心向外扩散，形成一个透明的内圆，从而“挖空”圆环 */
        radial-gradient(
            circle at center,
            white calc(50% - var(--ring-thickness)), /* 内圆的半径，比总半径小一个厚度 */
            transparent calc(50% - var(--ring-thickness) + 1px) /* 确保边缘清晰 */
        ),
        /* 锥形渐变，从0度开始，根据--current-progress变量绘制填充色 */
        conic-gradient(
            var(--fill-color) calc(var(--current-progress) * 1%), /* 进度填充色 */
            var(--empty-color) calc(var(--current-progress) * 1%) /* 未填充色 */
        );
    /* 如果conic-gradient不支持，提供一个基础背景色 */
    background-color: var(--empty-color); 

    /* 动画定义：驱动--current-progress变量从0到指定值 */
    animation: fillProgress var(--animation-duration) linear forwards;
    /* 
     * 实际项目中，--current-progress的值通常会通过JavaScript动态设置，
     * 这里为了演示动画效果，直接在keyframes里定义。
     */
}

.loading-progress-ring .progress-value {
    font-size: calc(var(--ring-size) / 4); /* 根据圆环大小调整字体 */
    font-weight: bold;
    color: var(--text-color);
    z-index: 1; /* 确保文本在渐变之上 */
    /* 
     * 动画监听：通过JS监听动画的每一帧，更新文本显示。
     * 这种方式在CSS中无法直接实现，通常需要JavaScript。
     * 这里只是一个占位符，实际动画过程中文本不会自动更新。
     */
}

/* 关键帧动画，控制进度变量的变化 */
@keyframes fillProgress {
    from {
        --current-progress: 0;
    }
    to {
        --current-progress: 75; /* 示例：动画到75% */
    }
}

background

radial-gradient

conic-gradient

radial-gradient

conic-gradient

--current-progress

div

clip-path

conic-gradient

conic-gradient

linear-gradient

radial-gradient

linear-gradient

radial-gradient

conic-gradient

conic-gradient

conic-gradient

animation-timing-function

linear

ease-in-out

cubic-bezier()

conic-gradient

/* 示例：更复杂的conic-gradient，带多种颜色过渡 */
background:
    radial-gradient(
        circle at center,
        white calc(50% - var(--ring-thickness)),
        transparent calc(50% - var(--ring-thickness) + 1px)
    ),
    conic-gradient(
        #ff9a9e 0%, /* 起始颜色 */
        #fad0c4 var(--current-progress), /* 填充色过渡 */
        #ffb7b7 var(--current-progress), /* 另一种填充色，增加层次 */
        #e0e0e0 100% /* 未填充色 */
    );

aria-valuenow

aria-valuemin

aria-valuemax

aria-valuenow

conic-gradient

will-change: transform;

will-change: background;

conic-gradient

conic-gradient

conic-gradient

conic-gradient

conic-gradient

conic-gradient

mask

clip-path

conic-gradient