圆形进度条

平常我们在加载的时候经常看到一些进度条，提高了用户体验。但是，其实呢，可能看到的不是我们看的那样哦，眼见不一定为实，嘿嘿。一般情况下，是我们做出来的一个假的，迷惑大家嘿嘿嘿。

首先先做静态DOM结构。我们这里用的技术是通过rotate属性来实现旋转的。所以我们用的是两个半圆和一个圆，实现一个圆环。

 <div class="ui-container">
    <div class="ui-circle is-left">
        <span class="circle__left" id="circle1"></span>
    </div>
    <div class="ui-circle is-right">
        <span class="circle__right" id="circle2"></span>
    </div>
    <div class="ui-center"></div>
</div>

<button onclick="onLoadTap()">开始加载</button>
<button onclick="reloadTap()">关闭</button>

接着是css属性，我们构造需要用到的是

 <style>
    .ui-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
    }

    .ui-circle {
        position: absolute;
        overflow: hidden;
        width: 50px;
        height: 100px;
    }

    .is-left {
        left: 0;
    }

    .is-right {
        left: 50%;
    }

    .ui-center {
        width: 90px;
        height: 90px;
        background: #fff;
        border-radius: 999px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .circle__left {
        display: block;
        position: absolute;
        border-radius: 0 999px 999px 0;
        background: yellow;
        width: 100%;
        height: 100%;
        transform-origin: 0 50% 0;
        left: 100%;
        transition: transform .4s ease-in-out;
    }

    .circle__right {
        display: block;
        border-radius: 999px 0 0 999px;
        background: yellow;
        width: 100%;
        height: 100%;
        transform-origin: 100% 50% 0;
        position: absolute;
        left: -100%;
        transition: transform .4s ease-in;
    }
</style>

这里我们提一下这个border-radius属性，在这里我们的border-radius属性直接设置到了999px；一般来说设置这么大的原因是因为担心有时候撑不开不能形成圆，而且这个border-radius属性是动态分配的，比如说，如果有一个这样设置

     .ui-radius {
        width: 100px;
        height: 100px;
        border-radius: 999px 200px 200px 999px;
        background: #ccc;
    }
      <div class="ui-radius">
      </div>

image.png

另外，我们可以提到
transform-origind的百分比是相对自身的。left百分比是相对父元素的

接下来就是script书写了。

<script>
    var circle1 = document.getElementById('circle1');
    var circle2 = document.getElementById('circle2');

    function setProcess(data) {
        var isHalf = false;
        var process = data;

        circle2.addEventListener('transitionend', function () {
            if (circle2.style.transform == 'rotate(180deg)') {
                isHalf = true;
                circle1.style.transform = 'rotate(' + (process - 50) / 50 * 180 + 'deg)';
            }
        })
        if (circle2.style.transform == 'rotate(180deg)') {
            isHalf = true;
            circle1.style.transform = 'rotate(' + (process - 50) / 50 * 180 + 'deg)';
        }
        if (process < 50) {
            circle2.style.transform = 'rotate(' + 　process / 50 * 180 + 　'deg)';
            return;
        } else {
            circle2.style.transform = 'rotate(180deg)';
            if (isHalf) {
                circle1.style.transform = 'rotate(' + (process - 50) / 50 * 180 + 'deg)';
            }
            else {
                circle2.style.transform = 'rotate(180deg)'
            }
        }
    }

    var process = {
        time: 0
    };

    function onLoadTap() {
        circle1.style.opacity = 1;
        circle2.style.opacity = 1;
        if (process.time < 100) {
            setProcess(process.time);
            setTimeout(function () {
                process.time += 5;
                setProcess(process.time);
                onLoadTap();
            }, 100);
        }
    }

    function reloadTap() {
        circle1.style.opacity = 0;
        circle2.style.opacity = 0;
        if (circle1.style.transform) {
            circle1.style.transition = '';
            circle1.style.transform = '';
        }
        if (circle2.style.transform) {
            circle2.style.transition = '';
            circle2.style.transform = '';
        }
        if (process.time) process.time = 0;
        // onLoadTap();
    }
</script>

在这里，我是通过每次加一定的进度值来达到旋转一周的。这里用到了transitioned事件的监听，当左边的半圆旋转180°时右边的才会开始旋转，当左半圆旋转完成后，才可以进行右半圆的旋转。
关闭的部分我为了让其不要出现动画效果，直接设置opacity为0，再进行之后的操作，其实这样的操作本人觉得不是很好，但简单粗暴。
主要是思路上的操作，细节方面如命名由于与之前想要的效果不一样，没有改命名，觉得还是欠缺一些的。
其实也可以加上个数字，让更加真实一些的哈哈。