CSS圆圈动画显示百分比

CSS Circle animation to show percentage

本文关键字：显示 百分比 动画 CSS      更新时间：2023-09-26

我有一个圆圈，我在中间显示一些文本，如小提琴所示( JSFIDDLE http://jsfiddle.net/874jgh4v/2/ )我的要求是这个

  1. 我需要为外白边框设置百分比动画例如，如果百分比为50%那么我只需要在圆的一半左右显示该边框

  2. 我需要显示百分比值，例如，文本50%应该只显示，最好有一些动画

.wrapper{padding:30px;}
.circle{
    border-radius: 50%;
    background:#32a500;    
    box-shadow: 0px 0px 0px 16px  #f1f1f1;
    border: 16px solid #f9f9f9;
    width:220px;
    height:220px;
    box-sizing:border-box;
}
.circle:hover {
     background:red;    
}
<div class="wrapper">
    <div class="circle">
        <p>Total ROE's</p>
        <p>300</p>
        <p>70%</p>
     </div>
</div>
任何帮助将不胜感激!此外，我更愿意在没有外部库的情况下这样做，百分比应该支持小数点最多两个点。

试试这个:

Html 

<span class='Progress'>
    <div class="Bar">
        <div class="Outer">
            <div class="Fill"></div>
        </div>
        <div class="Draw"></div>
        <div class="Status"><span></span></div>
    </div>                
</span>
CSS 

   .Progress {
        position: absolute;
        left: 25%;
        bottom: 30%;
    }
        .Progress .Bar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: #E5E5E5;
            position: relative;
        }
        .Progress .Bar .Outer {
            content: "";
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 35px);
            top: calc(50% - 35px);
            width: 70px;
            height: 70px;
            clip: rect(0, 70px, 70px, 35px);
        }
            .Bar .Outer .Fill {
                content: "";
                position: absolute;
                border-radius: 50%;
                left: calc(50% - 35px);
                top: calc(50% - 35px);
                width: 70px;
                height: 70px;
                clip: rect(0, 35px, 70px, 0);
                background: #00A0E3;
                transform: rotate(60deg);
            }
        .Progress .Bar .Draw {
            content: "";
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 53.84615px/2);
            top: calc(50% - 53.84615px/2);
            width: 53.84615px;
            height: 53.84615px;
            background: #fff;
            text-align: center;
            display: table;
        }
        .Progress .Bar .Status {
            display: table-cell;
            vertical-align: middle;
            position: absolute;
            margin-left: -100px;
            margin-top: -10px;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            text-align: center;
        }
        .Progress .Bar .Status > span {
            font-size: 14px;
            font-weight: bold;
            color: #00A0E3;
        }
        .Progress .Bar.halfway {
            background-color: #00A0E3;
        }
            .Progress .Bar.halfway .Outer {
                clip: rect(0, 35px, 70px, 0);
            }
                .Progress .Bar.halfway .Outer .Fill {
                    clip: rect(0, 70px, 70px, 35px);
                    background: #E5E5E5;
                }
            .Progress .Bar.complete.halfway,
            .Progress .Bar.complete .Fill
            {
                background-color: #8cd64c !important;
            }
Javascript/JQuery: 

$('document').ready(function() {
    var progress = function(perc) {
        perc = Math.round(perc * 100) / 100; // 2 decimal places
        var $bar = $('.Progress .Bar'), 
            $fill = $('.Progress .Bar .Outer .Fill'),
            $status = $('.Progress .Bar .Status span');
        $bar.removeClass("halfway").removeClass("complete");
        // outer bar
        if (perc >= 50) $bar.addClass("halfway");
        if (perc >= 100) $bar.addClass("complete");
        // progress bar
        var degrees = 360 * perc / 100;
        $fill.css({
          "WebkitTransform": 'rotate(' + degrees + 'deg)',
          "-moz-transform": 'rotate(' + degrees + 'deg)'
        });
      // status
        $status.html(perc);
    }
    // Test it!
    progress(10);
    setTimeout(function() { 
      progress(50); 
      setTimeout(function() { 
        progress(100); 
      }, 2000);
    }, 2000);
});

给我看看CodePen

相关文章：