css环形进度条

吉宝程序圆

于 2023-03-10 15:08:48 发布

阅读量647

点赞数

分类专栏：知识点文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_47297537/article/details/129443254

版权

知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
        font-size: 160px;

    }

    #app {
        width: 1440px;
        height: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .circle {
        position: relative;
        /* font-size: 193px; */
        width: 1rem;
        height: 1rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: #e7ebe3;
  
    }

    .circle:after {
        position: absolute;
        top: 0.08rem;
        left: 0.08rem;
        display: block;
        content: " ";
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: white;
        width: 0.84rem;
        height: 0.84rem;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    .circle .slice {
        position: absolute;
        width: 1rem;
        height: 1rem;

    }

    .bar {
        width: 1rem;
        height: 1rem;
        position: absolute;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        border: 0.08rem solid #307bbb;
        box-sizing: border-box;
        clip: rect(0, 0.5rem, 1rem, 0rem);
        /* 截出一个半圆 */
        transform: rotate(calc(1deg * var(--deg)));
        transition: 0.7s;
    }

    .fill {
        width: 1rem;
        height: 1rem;
        position: absolute;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        border: 0.08rem solid #307bbb;
        box-sizing: border-box;
        clip: rect(0, 1rem, 1rem, 0.5rem);
        /* 截出一个半圆 */
        transform: rotate(calc(1deg * var(--deg)));
    }
    img{
        width: 0.8rem;
        height: 0.8rem;
    }
</style>

<body>
    <div v-cloak id="app">
        <div class="circle">
            <div
                style="position: absolute;z-index: 999;width: 1rem;height:1rem;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 20px;">
              <img src="https://shunhui.at1984.com:8443/resource/userfiles/shunhui/shunhui_user_head.png" alt="">
            </div>
            <div :style="circleDeg > 180 ? '' : 'clip: rect(0, 1rem, 1rem, 0.5rem);'" class="slice">
                <div :style="{'--deg':circleDeg > 180 ? 180 : circleDeg}" class="bar"></div>
                <div v-if="circleDeg > 180" :style="{'--deg':circleDeg - 180}" class="fill"></div>
            </div>
        </div>
        <!-- <span>22%</span> -->

        角度：<input v-model="deg" type="number" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: function () {
                return {
                    deg: 45
                }
            },
            filters: {
                toFixed2: function (num) {
                    return (num * 100).toFixed(2)
                }
            },
            computed: {
                circleDeg: function () {
                    // 可能有负的度数
                    return Math.abs(this.deg) % 360
                }
            }
        })
    </script>
</body>

</html>