How to make a progress bar like a clock in html

Question

there is some graduation in progress bar , light color is background , when progress bar start working , the deep color will fill the light color , like a clock

I don't want to use jQuery , What shall I do?

EDIT:

before start ,all arc segment is light color ,after starting deep color will fill the light color one by one in a lot of time until all light color be filled by deep color , like 0-100%

Do you mean each arc segment loop itselt or loop on the whole? Is the loop infinite? — TTCC, Jul 22 '16 at 03:48
before start ,all arc segment is light color ,after starting deep color will fill the light color one by one in a lot of time until all light color be filled by deep color , like 0-100%@TTCC — jansma, Jul 22 '16 at 04:59

score 3 · Accepted Answer · answered Jul 22 '16 at 07:08

Is this what you want ?

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>

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You can refer to this stackoverflow post which is much relevant to your requirement. And the demo can be found here

Note: You may need to rewrite the jQuery part (of the fiddle example given above to javascript if you don't want to rely on jQuery)

edited May 23 '17 at 12:14

Community

1
1

answered Jul 22 '16 at 06:48

David R

14,711
7
54
72

How to make a progress bar like a clock in html

2 Answers2