javascript - CSS Circle动画显示百分比

Question

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

1. 我需要为百分比设置外部白色边框的动画，例如，如果百分比为 50%，则我需要仅在半个圆圈周围显示该边框

2. 我需要在 hower 上显示百分比值，例如文本 50% 应该只在 hower 上显示，最好使用一些动画。

.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>

任何帮助，将不胜感激!此外，我更愿意在没有外部库的情况下执行此操作，百分比应支持最多两点的小数点。

Answer 1

试试这个:

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);

});

Show me the CodePen