如何在html中制作一个像时钟一样的进度条

Question

进度条有一些刻度，浅色是背景，当进度条开始工作时，深色会填满浅色，就像时钟一样

我不想使用 jQuery，我该怎么办？

编辑：

在开始之前，所有的弧段都是浅色，在开始深色之后会在很多时间里一个一个地填充浅色，直到所有的浅色都被深色填充，比如0-100%

Answer 1

您可以参考thisstackoverflow 帖子，该帖子与您的要求非常相关。并且demo可以找到 here

注意：您可能需要重写 jQuery 部分（如果您不想依赖 jQuery，则将上面给出的小提琴示例改写为 javascript）

Answer 2

this是你想要的吗？

setTimeout(function () {
        document.getElementById("cambered-three").className = "cambered cambered-three animate";
        setTimeout(function () {
            document.getElementById("cambered-two").className = "cambered cambered-two animate";
        }, 3600)
    }, 3600)

.cambered-loading {
        transform: scale(1);
        position: relative;
        border: 2px solid;
        width: 450px;
        height: 240px;
        border-radius: 50%;
        padding-top: 208px;
        animation: bordercolor 10.8s forwards;
    }

    @keyframes bordercolor {
        0% {
            border-color: #b5f1bb;
        }
        16.7% {
            border-color: #3cda4b;
        }
        33.3% {
            border-color: #c3e6ff;
        }
        50% {
            border-color: #38adff;
        }
        66.6% {
            border-color: #fff2c3;
        }
        100% {
            border-color: #ffd338;
        }
    }

    .cambered li {
        display: block;
        width: 5px;
        height: 16px;
        position: absolute;
        left: 50%;
        top: -10px;
        animation-fill-mode: forwards;
    }

    .cambered-one {
        transform: rotateZ(-54deg);
    }

    .cambered-one li {
        background: #b5f1bb;
        animation-name: cambered-one;
    }

    @keyframes cambered-one {
        0% {
            background: #3cda4b;
        }
        100% {
            background: #3cda4b;
        }
    }

    .cambered-two {
        transform: rotateZ(-174deg);
    }

    .cambered-two li {
        background: #fff2c3;
    }

    .cambered-two.animate li {
        animation-name: cambered-two;
    }

    @keyframes cambered-two {
        0% {
            background: #ffd338;
        }
        100% {
            background: #ffd338;
        }
    }

    .cambered-three {
        transform: rotateZ(66deg);
    }

    .cambered-three li {
        background: #c3e6ff;
    }

    .cambered-three.animate li {
        animation-name: cambered-three;
    }

    @keyframes cambered-three {
        0% {
            background: #38adff;
        }
        100% {
            background: #38adff;
        }
    }

    .cambered li:first-child {
        animation-delay: 0.1s;
        transform: rotate(3deg) translateY(-200px)
    }

    .cambered li:nth-child(2) {
        animation-delay: 0.2s;
        transform: rotate(6deg) translateY(-200px)
    }

    .cambered li:nth-child(3) {
        animation-delay: 0.3s;
        transform: rotate(9deg) translateY(-200px)
    }

    .cambered li:nth-child(4) {
        animation-delay: 0.4s;
        transform: rotate(12deg) translateY(-200px)
    }

    .cambered li:nth-child(5) {
        animation-delay: 0.5s;
        transform: rotate(15deg) translateY(-200px)
    }

    .cambered li:nth-child(6) {
        animation-delay: 0.6s;
        transform: rotate(18deg) translateY(-200px)
    }

    .cambered li:nth-child(7) {
        animation-delay: 0.7s;
        transform: rotate(21deg) translateY(-200px)
    }

    .cambered li:nth-child(8) {
        animation-delay: 0.8s;
        transform: rotate(24deg) translateY(-200px)
    }

    .cambered li:nth-child(9) {
        animation-delay: 0.9s;
        transform: rotate(27deg) translateY(-200px)
    }

    .cambered li:nth-child(10) {
        animation-delay: 1s;
        transform: rotate(30deg) translateY(-200px)
    }

    .cambered li:nth-child(11) {
        animation-delay: 1.1s;
        transform: rotate(33deg) translateY(-200px)
    }

    .cambered li:nth-child(12) {
        animation-delay: 1.2s;
        transform: rotate(36deg) translateY(-200px)
    }

    .cambered li:nth-child(13) {
        animation-delay: 1.3s;
        transform: rotate(39deg) translateY(-200px)
    }

    .cambered li:nth-child(14) {
        animation-delay: 1.4s;
        transform: rotate(42deg) translateY(-200px)
    }

    .cambered li:nth-child(15) {
        animation-delay: 1.5s;
        transform: rotate(45deg) translateY(-200px)
    }

    .cambered li:nth-child(16) {
        animation-delay: 1.6s;
        transform: rotate(48deg) translateY(-200px)
    }

    .cambered li:nth-child(17) {
        animation-delay: 1.7s;
        transform: rotate(51deg) translateY(-200px)
    }

    .cambered li:nth-child(18) {
        animation-delay: 1.8s;
        transform: rotate(54deg) translateY(-200px)
    }

    .cambered li:nth-child(19) {
        animation-delay: 1.9s;
        transform: rotate(57deg) translateY(-200px)
    }

    .cambered li:nth-child(20) {
        animation-delay: 2s;
        transform: rotate(60deg) translateY(-200px)
    }

    .cambered li:nth-child(21) {
        animation-delay: 2.1s;
        transform: rotate(63deg) translateY(-200px)
    }

    .cambered li:nth-child(22) {
        animation-delay: 2.2s;
        transform: rotate(66deg) translateY(-200px)
    }

    .cambered li:nth-child(23) {
        animation-delay: 2.3s;
        transform: rotate(69deg) translateY(-200px)
    }

    .cambered li:nth-child(24) {
        animation-delay: 2.4s;
        transform: rotate(72deg) translateY(-200px)
    }

    .cambered li:nth-child(25) {
        animation-delay: 2.5s;
        transform: rotate(75deg) translateY(-200px)
    }

    .cambered li:nth-child(26) {
        animation-delay: 2.6s;
        transform: rotate(78deg) translateY(-200px)
    }

    .cambered li:nth-child(27) {
        animation-delay: 2.7s;
        transform: rotate(81deg) translateY(-200px)
    }

    .cambered li:nth-child(28) {
        animation-delay: 2.8s;
        transform: rotate(84deg) translateY(-200px)
    }

    .cambered li:nth-child(29) {
        animation-delay: 2.9s;
        transform: rotate(87deg) translateY(-200px)
    }

    .cambered li:nth-child(30) {
        animation-delay: 3s;
        transform: rotate(90deg) translateY(-200px)
    }

    .cambered li:nth-child(31) {
        animation-delay: 3.1s;
        transform: rotate(93deg) translateY(-200px)
    }

    .cambered li:nth-child(32) {
        animation-delay: 3.2s;
        transform: rotate(96deg) translateY(-200px)
    }

    .cambered li:nth-child(33) {
        animation-delay: 3.3s;
        transform: rotate(99deg) translateY(-200px)
    }

    .cambered li:nth-child(34) {
        animation-delay: 3.4s;
        transform: rotate(102deg) translateY(-200px)
    }

    .cambered li:nth-child(35) {
        animation-delay: 3.5s;
        transform: rotate(105deg) translateY(-200px)
    }

    .cambered li:nth-child(36) {
        animation-delay: 3.6s;
        transform: rotate(108deg) translateY(-200px)
    }

<div class="cambered-loading">
    <ul class="cambered cambered-one" id="cambered-one">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="cambered cambered-two" id="cambered-two">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="cambered cambered-three" id="cambered-three">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>