step by step:圆形loading进度条实现步骤详解 - 快车库

简介

实际开发中，文件的download、upload、图片的加载等情形下经常需要展示进度情况。最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下稍微复杂的圆形进度条如何实现。

先来效果图

需要了解的几个CSS知识点

transform 旋转 (这里只需要用到2d )
clip 裁剪设置元素的一部分可视

实现步骤

整体的圆是分成两个半圆来实现的，为什么呢？因为要。。。每个圆遮住一半，不然完整的圆滚来滚去跟没滚一样。
下面只说明半圆的实现方式，最后拼在一起即可，以右半边为例一步步说明：

设圆整体区域 200px * 200px

遮住左边的100*200

{
    clip: rect(0,200px,auto,100px) //不明白的先看相关资料
}

然后旋转一定的角度

{
    transform: rotate(40px)   //不明白语法的先找下资料
}

看上图发现，我们只要求半圆的实现，但上图已经超出右边半圆到左边区域了，到时候会覆盖左边，所以我们要把超出去的部分遮住，于是给右边半圆设置父容器，它的大小形状跟上面的半圆一样，只是它不旋转，这样就能遮住超出去的旋转半圆了。（这里我们给父容器加上底色）加上父容器后，效果如下。至此完成右边半圆的设置，在加上左边半圆，就搞定了。

Tips

具体使用时，当进度<= 50%，只有右边旋转，左边保持不动；>50%的时候，右边旋转180度，左边也旋转一定度数
旋转的进度条，除了用在圆上，矩形上也可以。一样的道理，只是把旋转的区域增大，然后用矩形来截取即可。

贴上实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形进度条</title>
    <style>
        .circle-left-mask, .circle-right-mask, .circle-left, .circle-right {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .circle-left-mask, .circle-right-mask {
            background-color: pink;
        }

        .circle-left, .circle-right {
            background-color: salmon;
        }

        .circle-left-mask, .circle-left {
            clip: rect(0, 100px, auto, 0);
        }

        .circle-right-mask, .circle-right {
            clip: rect(0, 200px, auto, 100px);
        }

        .circle-left {
            /*设置左边的旋转*/
            transform: rotate(0deg);
        }

        .circle-right {
            /*设置右边的旋转*/
            transform: rotate(40deg);
        }
    </style>
</head>
<body>
<div class="circle-left-mask">
    <div class="circle-left"></div>
</div>
<div class="circle-right-mask">
    <div class="circle-right"></div>
</div>
</body>
</html>