How to implement a circular loop progress bar in css-Front-end Q&A-php.cn

How to implement a circular loop progress bar in css

藏色散人

Release： 2023-01-31 10:05:09

Original

2407 people have browsed it

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>

Copy after login

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>

Copy after login

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!