Home  >  Article  >  Web Front-end  >  How to implement a circular loop progress bar in css

How to implement a circular loop progress bar in css

藏色散人
藏色散人Original
2023-01-31 10:05:092391browse

How to implement a circular loop progress bar in css: 1. Create an outermost parent ring; 2. Draw two semicircles through "clip-path" and absolutely position them to cover the parent circle. ring; 3. When it is less than 50, slowly reveal the color of the parent ring by rotating the right semicircle; 4. When it is greater than 50, set the rotation degree of the right semicircle to 0 and modify its border color to achieve the effect of the first 50. Secondly Then rotate the left semicircle to achieve the effect.

How to implement a circular loop progress bar in css

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to implement a circular loop progress bar in css?

##CSS implementation of ring progress bar

1. Static progress bar
First, let’s look at a static progress bar

  • The first step is of course to implement an outermost parent ring.

  • The second step is to draw two semicircles through

    clip-path, and absolutely position them to cover the parent ring.

  • When it is less than 50, we only need to rotate the right semicircle and slowly reveal the color of the parent ring to achieve the effect.

  • When it is greater than 50, we first follow the process to go to the first 50, then set the right semicircle rotation degree to 0, modify its border color to achieve the effect of the first 50, and then rotate the left side A semicircle will do the trick.

<template>
    <div>
        <div></div>
        <div></div>
        <div>
            <span>成功率</span>
            <span>85%</span>
        </div>
    </div></template><script>export default {
    name: &#39;CircleProgress&#39;,
    setup() {
        const renderRightRate = (rate: number) => {
            if (rate < 50) {
                return &#39;transform: rotate(&#39; + 3.6 * rate + &#39;deg);&#39;;
            } else {
                return &#39;transform: rotate(0);border-color: #54c4fd;&#39;;
            }
        };

        const renderLeftRate = (rate: number) => {
            if (rate >= 50) {
                return &#39;transform: rotate(&#39; + 3.6 * (rate - 50) + &#39;deg);&#39;;
            }
        };
        return {
            renderLeftRate,
            renderRightRate,
        };
    },};</script><style>.circle {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    left: 200px;
    top: 50px;
    box-shadow: inset 0 0 0 5px #54c4fd;

    .ab {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    &_left {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 40px, 80px, 0);
    }

    &_right {
        border: 5px solid #546063;
        border-radius: 50%;
        clip: rect(0, 80px, 80px, 40px);
    }

    &_text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;

        .name {
            margin-bottom: 4px;
        }
    }}</style>
The effect is as follows:


How to implement a circular loop progress bar in css

2. Dynamic progress bar
Dynamic

cssIn fact, it is the same as static. This example is written at a fixed pace, and you can also change it according to your own needs.

<template>
    <div>
        <div></div>
        <div></div>
        <div>
            <span>成功率</span>
            <span>85%</span>
        </div>
    </div></template><script>import { onMounted, ref, Ref } from &#39;vue&#39;;export default {
    name: &#39;CircleProgress&#39;,
    setup() {
        const circleLeft: Ref<HTMLElement | null | any> = ref(null);
        const circleRight: Ref<HTMLElement | null | any> = ref(null);
        let timer = 0;
        let percent = 0;

        const step = () => {
            percent += 1;

            if (percent < 50) {
                circleRight.value.style.transform = &#39;rotate(&#39; + 3.6 * percent + &#39;deg)&#39;;
            } else {
                circleRight.value.style.transform = &#39;rotate(0)&#39;;
                circleRight.value.style.borderColor = &#39;#54c4fd&#39;;
                circleLeft.value.style.transform = &#39;rotate(&#39; + 3.6 * (percent - 50) + &#39;deg)&#39;;
            }
            if (percent < 85) {
                window.clearTimeout(timer);
                timer = window.setTimeout(step, 20);
            }
        };

        onMounted(() => {
            step();
        });

        return {
            circleLeft,
            circleRight,
        };
    },};</script>
The effect is as follows:


How to implement a circular loop progress bar in css

Recommended learning: "

css video tutorial"

The above is the detailed content of How to implement a circular loop progress bar in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn