css进度条

最新推荐文章于 2024-01-04 17:10:16 发布

深海有鱼呀

最新推荐文章于 2024-01-04 17:10:16 发布

阅读量138

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/weixin_42069147/article/details/103570100

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*支持IE9及以上*/
    .circle-bar { font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #333; }
    .circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
    /*
        这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
        clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
     */
    .circle-bar-right { clip:rect(0,auto,auto,.5em); }
    .circle-bar-left { clip:rect(0,.5em,auto,0); }
    
    .mask { width: 0.8em; height: 0.8em;  background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
    .mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block;  }
    /*所有的后代都水平垂直居中，这样就是同心圆了*/
    .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    /*自身以及子元素都是圆*/
    .circle-bar, .circle-bar > * { border-radius: 50%; }
   </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <div class="circle-bar">
        <div class="circle-bar-left"></div>
        <div class="circle-bar-right"></div>
        <!-- 遮罩层，显示百分比 -->
        <div class="mask">
            <span class="percent">60%</span>
        </div>
    </div>

   <script>
            $(function () {
            var percent = 0;
            var interval = setInterval(function () {
                //            var percent = parseInt($('.mask :first-child').text());
                percent+=5;
                var baseColor = $('.circle-bar').css('background-color');
                if (percent <= 50) {
                    $('.circle-bar-right').css('transform', 'rotate(' + (percent * 3.6) + 'deg)');
                } else {
                    $('.circle-bar-right').css({
                        'transform': 'rotate(0deg)',
                        'background-color': baseColor
                    });
                    $('.circle-bar-left').css('transform', 'rotate(' + ((percent - 50) * 3.6) + 'deg)');
                }
                $('.mask :first-child').html(percent + "%");
                if (percent == 100) {
                    $('.circle-bar-right').css({
                        'transform': 'rotate(0deg)',
                        'background-color': '#e2e2e2'
                    });
                    $('.circle-bar-left').css({
                        'transform': 'rotate(0deg)',
                        'background-color': '#e2e2e2'
                    });
                    percent = 0;
                    clearInterval(interval);
                }
            }, 1000);
        })
   
   
   
   
   </script>

</body>
</html>

https://www.cnblogs.com/johnblogs/p/10985944.html
https://segmentfault.com/a/1190000012655551

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>环形进度条</title>
    <style>
        .wrapper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 4em;
            height: 4em;
            margin: auto;
        }
        .container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2em;
            overflow: hidden;
        }
        .halfCir {
            width: 2em;
            height: 4em;
            background: red;
        }
        .container1 {
            left: 2em;
        }
        .container1 .halfCir {
            left: 0;
            border-radius: 0 4em 4em 0;
            transform-origin: 0 50%;
            animation: halfCir1 4s infinite linear;            
        }
        .container2 {
            left: 0;
        }
        .container2 .halfCir {
            border-radius: 4em 0 0 4em;
            transform-origin: 2em 2em;
            animation: halfCir2 4s infinite linear;
        }
        @keyframes halfCir1 {
            50%, 100% {
                transform: rotateZ(180deg);
            }
        }
        @keyframes halfCir2 {
            0%, 50% {
                transform: rotateZ(0);
            }
            100% {
                transform: rotateZ(180deg);
            }
        }
        .wrapper::after {
            position: absolute;
            top: 0.5em;
            left: 0.5em;
            width: 3em;
            height: 3em;
            background: #fff;
            border-radius: 50%;
            content: "";    
        }
        .cir {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 0.5em;
            height: 0.5em;
            margin: auto;
            background: red;
            border-radius: 50%;
        }
        .cir2 {
            transform-origin: 50% 2em;
            animation: cir2 4s infinite linear;
        }
        @keyframes cir2 {
            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper"> 
        <div class="container container1"> 
            <div class="halfCir"></div> 
        </div> 
        <div class="container container2"> 
            <div class="halfCir"></div> 
        </div>
        <div class="cir cir1"></div> 
        <div class="cir cir2"></div>
    </div>
</body>
</html>

https://blog.csdn.net/qq_42565994/article/details/85228451

深海有鱼呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css进度条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫