css实现圆形进度条加载动画

最新推荐文章于 2025-05-12 13:36:30 发布

前端小黑

最新推荐文章于 2025-05-12 13:36:30 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/zemprogram/article/details/90725234

这里我会把遇到这个需求时的实现过程和遇到的问题记录下来，如果只是要看最终实现结果可直接滑到底部看实现代码。

我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆，这个动画实际上可以通过纯css来实现

通常情况下，我们实现这种结构只需要使用border-radius和padding就可以实现上图的样子，但是要实现动画，我们需要采取别的方式，这里要使用一个不常用的样式---clip（至少我在做这个动画前没使用过这个样式，不了解的可以上W3C clip样式看看）

首先我们要把中间的数字和动画分离开，中间的数字变化可以使用js的计数器来控制，动画则要由纯css来实现，可以通过after或者before来分离数字和圆弧。代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .time {
            display: inline-block;
            position: relative;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        div::after {
            position: absolute;
            left: 0px;
            content: "";
            width: 50px;
            height: 50px;
            border: 1px solid #09f;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div>
        <span class="time" id="time">10</span>
    </div>
    <script>
        var time = document.getElementById('time')

最低0.47元/天解锁文章