CSS круг анимации, чтобы показать процент

0

У меня есть круг, и я показываю некоторый текст в середине, как показано в скрипке ( 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>
Любая помощь будет оценена! Также я бы предпочел сделать это без внешних библиотек, проценты должны поддерживать десятичные точки до двух точек.
  • 0
    Много примеров онлайн, показывающих чистые индикаторы выполнения Css3, например: codepen.io/geedmo/pen/InFfd
  • 0
    ни одна из этих работ для динамических входов, скажем, я даю 83%, это не будет работать, мне нужно что-то, что работает динамически
Показать ещё 5 комментариев
Теги:

1 ответ

0

Попробуй это:

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню