step by step:圆形loading进度条实现步骤详解

时间 2019-12-05

标签 step 圆形 loading 进度实现步骤详解繁體版

原文原文链接

简介

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

先来效果图

须要了解的几个CSS知识点

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

实现步骤

总体的圆是分红两个半圆来实现的，为何呢？由于要。。。每一个圆遮住一半，否则完整的圆滚来滚去跟没滚同样。
下面只说明半圆的实现方式，最后拼在一块儿便可，以右半边为例一步步说明：orm

设圆总体区域 200px * 200px
htm

遮住左边的100*200图片

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

而后旋转必定的角度ip

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

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

Tips

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

贴上实例代码

<!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>