html - 如何创建一个看起来像计时器的圆形进度条？

Question

我想创建一些界面类似于下面链接中的界面的应用程序。它是一个带有灰色边框的圆形 + 当时间流逝时填充的白色“东西”。它就像一个计时器 (Javascript)。我一直在思考如何着手解决这个问题，尝试了一些方法但仍然没有成功。

如有任何帮助，我们将不胜感激。

干杯!

链接:https://assets.materialup.com/uploads/45d32a70-45ff-4804-9ac3-f6d99d98e235/Joj-zpRkNbkBPb_zhEknJd2SyfxJ7SDc-bEFWliGG7AqQaaIP10cf3NkbpbeInLK5A=h900

Answer 1

这里有类似的东西

标记

<div class="flex">
    <div class="m-progress-loader">
        <div class="m-progress-loader--fill"></div>
        <div class="m-progress-loader--mask"></div>
    </div>
    <div class="m-progress-loader is-done">
        <div class="m-progress-loader--fill"></div>
        <div class="m-progress-loader--mask"></div>
    </div>
</div>

SCSS

html {
    font-size: 10px;
}

body {
    padding: 40px;
}

*,
:after,
:before {
    box-sizing: border-box;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes fill {
    0% {
        opacity: 0;
    }
    50%,
    100% {
        opacity: 1;
    }
}

@keyframes mask {
    0% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

$publishing-loader-color: #74da7a;
$scheduling-loader-color: #f0cc4e;
$loader-color: #e6e6e6;
$loader-color-darken: darken($loader-color, 20%);
$loader-mask-color: #f3f5f6;
$load-size: 6rem;
$load-border-size: 0.7rem;
$load-done-border-size: 1rem;
$spin-duration: 2s;
.m-progress-loader {
    margin: 30px; // for demo;
    font-size: $load-size;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: $loader-color;
    position: relative;
    overflow: hidden;
    &:before,
    &:after {
        content: " ";
        width: 0.5em;
        height: 1em;
        display: block;
        position: absolute;
        background: $loader-color-darken;
    }
    &:before {
        transform-origin: 0.5em 0.5em;
        animation: spin $spin-duration linear infinite;
        border-radius: 999px 0 0 999px;
    }
    &:after {
        right: 0;
        top: 0;
        opacity: 0;
        border-radius: 0 999px 999px 0;
        animation: fill $spin-duration steps(1, end) infinite;
    }
    &.is-done {
        &:before,
        &:after {
            opacity: 1;
            animation: none;
        }
        .m-progress-loader--mask {
            animation: none;
            background: $loader-mask-color;
            width: 0.5em;
            height: 0.25em;
            border-radius: 0;
            z-index: 4;
            top: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate(-50%, -75%) rotate(-45deg);
            &:before,
            &:after {
                content: " ";
                background: $loader-color-darken;
                border-radius: 1em;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
            }
            &:before {
                height: 100%;
                width: 0.09em;
            }
            &:after {
                height: 0.09em;
                width: 100%;
            }
        }
    }
}

.m-progress-loader--fill {
    height: 0.9em;
    width: 0.9em;
    background: $loader-mask-color;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.m-progress-loader--mask {
    width: 0.5em;
    height: 1em;
    position: absolute;
    background: inherit;
    border-radius: 999px 0 0 999px;
    animation: mask $spin-duration steps(1, end) infinite;
}

.mm-progress-loader--publishing {
    &:before,
    &:after {
        background: $publishing-loader-color;
    }
    &.is-done .m-progress-loader--mask {
        &:before,
        &:after {
            background: $publishing-loader-color;
        }
    }
}

.mm-progress-loader--scheduling {
    &:before,
    &:after {
        background: $scheduling-loader-color;
    }
    &.is-done .m-progress-loader--mask {
        &:before,
        &:after {
            background: $scheduling-loader-color;
        }
    }
}

https://jsfiddle.net/robi_osahan/z2v7xorn/