文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css怎么实现环形循环进度条

2023-05-14 22:20

关注

css怎么实现环形循环进度条

本教程操作环境:Windows10系统、CSS3版、DELL G3电脑

css怎么实现环形循环进度条?

CSS实现圆环进度条

一、静态进度条

首先,我们先看一个静态进度条

  • 第一步当然是先实现一个最外层的父级圆环。

  • 其次是通过 clip-path画出两个半圆,并绝对定位覆盖在父级圆环。

  • 小于50的时候,我们只需要通过旋转右半圆,慢慢透露出父级圆环的颜色,即可达到效果。

  • 大于50的时候,我们先按照流程走前面50,再设置右半圆旋转度数为0,修改其border颜色来实现前50的效果,其次再旋转左侧半圆即可达到效果。

<template>
    <div class="circle">
        <div class="circle_left ab" :style="renderLeftRate(85)"></div>
        <div class="circle_right ab" :style="renderRightRate(85)"></div>
        <div class="circle_text">
            <span class="name">成功率</span>
            <span class="value">85%</span>
        </div>
    </div></template><script lang="ts">export default {
    name: 'CircleProgress',
    setup() {
        const renderRightRate = (rate: number) => {
            if (rate < 50) {
                return 'transform: rotate(' + 3.6 * rate + 'deg);';
            } else {
                return 'transform: rotate(0);border-color: #54c4fd;';
            }
        };

        const renderLeftRate = (rate: number) => {
            if (rate >= 50) {
                return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
            }
        };
        return {
            renderLeftRate,
            renderRightRate,
        };
    },};</script><style lang="scss">.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>

效果如下图:
9e95b75ad8d7b32e8957a1d8d4205c6.jpg

二、动态进度条

动态的css其实和静态的是一样的。
该例子是写的固定的进度,你们也可以根据自己的需求变换。

<template>
    <div class="circle">
        <div ref="circleLeft" class="circle_left ab"></div>
        <div ref="circleRight" class="circle_right ab"></div>
        <div class="circle_text">
            <span class="name">成功率</span>
            <span class="value">85%</span>
        </div>
    </div></template><script lang="ts">import { onMounted, ref, Ref } from 'vue';export default {
    name: 'CircleProgress',
    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 = 'rotate(' + 3.6 * percent + 'deg)';
            } else {
                circleRight.value.style.transform = 'rotate(0)';
                circleRight.value.style.borderColor = '#54c4fd';
                circleLeft.value.style.transform = 'rotate(' + 3.6 * (percent - 50) + 'deg)';
            }
            if (percent < 85) {
                window.clearTimeout(timer);
                timer = window.setTimeout(step, 20);
            }
        };

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

        return {
            circleLeft,
            circleRight,
        };
    },};</script>

效果如下:
在这里插入图片描述

以上就是css怎么实现环形循环进度条的详细内容,更多请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 资料下载
  • 历年真题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯