7

Всем доброго дня! Хочу реализовать круглый прогресс бар, отображающий числа(минуты) от 10 до 60. Вот код: https://jsfiddle.net

!

С чем трудности возникли: при изменении размеров окружности, внутренний круг (маска) неправильно отображается. Т.е. при 0 круг наполовину заполнен, а должен быть пустым. введите сюда описание изображения

Не подскажите, где искать проблему?

3
  • Можно более подробно описать проблему? 19 июл 2017 в 14:55
  • данный код нашла в интернете. Мне нужны размеры прогресс бара w:60 h:60. При изменении размеров, внутренний белый слой(маска) "ломается" и отображает неверно значения. Проблема в настройке движущегося круга
    – Sasha
    19 июл 2017 в 15:07
  • @Sasha вы пример откуда то взяли? после каких то перемен в коде начал не работать? я правильно понял? 21 июл 2017 в 6:31

1 ответ 1

3

У вас проблема в том что после 180deg элемент начинает начинает рисоваться с нуля, для этого после 30 секунд что бы рисовать остальную часть вам нужен второй элемент, у вас оно было но не правильно были заданы атрибуты.

Вот пример для рисования прогресс бара. Его можете использовать и для часов и для процентов:

$(document).ready(function () {
    var pie1 = $('.pie-1'),
        pie2 = $('.pie-2'),
        pie3 = $('.pie-3');
    progressBarUpdate(10, 100, pie1,'%');
    progressBarUpdate(59, 60, pie2, 's');
    progressBarUpdate(47, 60, pie3, 'm');
});

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
    });
}

function progressBarUpdate(x, outOf, elem,type) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;

    // caluclate the angle
    var drawAngle = x / outOf * 360;

    // calculate the angle to be displayed if each half
    if (drawAngle <= 180) {
        firstHalfAngle = drawAngle;
    } else {
        secondHalfAngle = drawAngle - 180;
    }

    // set the transition
    rotate(elem.find(".slice1"), firstHalfAngle);
    rotate(elem.find(".slice2"), secondHalfAngle);

    // set the values on the text
    elem.find(".status").html(x + "<span>"+type+"</span>");
}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);
.pie{
    background-color:#DFE8ED;
    width:160px;
    height:160px;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    position:relative;
}
.clip1 {
    position:absolute;
    top:0;
    left:0;
    width:160px;
    height:160px;
    clip:rect(0px, 160px, 160px, 80px);
}
.slice1 {
    position:absolute;
    width:160px;
    height:160px;
    clip:rect(0px, 80px, 160px, 0px);
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    background-color:#30BAE7;
    border-color:#30BAE7;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.clip2 {
    position:absolute;
    top:0;
    left:0;
    width:160px;
    height:160px;
    clip:rect(0, 80px, 160px, 0px);
}
.slice2 {
    position:absolute;
    width:160px;
    height:160px;                                /*<- вот здесь была ошибка*/
    clip:rect(0px, 160px, 160px, 80px);
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    background-color:#30BAE7;
    border-color:#30BAE7;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.status {
    
    position:absolute;
    top:13px;
    left: 13px;
    width: 134px;
    height: 93px;
    padding-top: 41px;
    border-radius: 100%;
    font-family: 'Titillium Web', sans-serif;
    font-size:50px;
    text-align:center;
    color: #3C4761;
    line-height:50px;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pie pie-1">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>
<div class="pie pie-2">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>
<div class="pie pie-3">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>

Вот тот же самый круг только в уменьшенном размере:

$(document).ready(function() {
    var pie1 = $('.pie-1'),
            pie2 = $('.pie-2'),
            pie3 = $('.pie-3');
    progressBarUpdate(10, 100, pie1, '%');
    progressBarUpdate(59, 60, pie2, 's');
    progressBarUpdate(47, 60, pie3, 'm');
});

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'zoom': 1
    });
}

function progressBarUpdate(x, outOf, elem, type) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;

    // caluclate the angle
    var drawAngle = x / outOf * 360;

    // calculate the angle to be displayed if each half
    if (drawAngle <= 180) {
        firstHalfAngle = drawAngle;
    } else {
        secondHalfAngle = drawAngle - 180;
    }

    // set the transition
    rotate(elem.find(".slice1"), firstHalfAngle);
    rotate(elem.find(".slice2"), secondHalfAngle);

    // set the values on the text
    elem.find(".status").html(x + "<span>" + type + "</span>");
}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);
.pie{
    background-color:#DFE8ED;
    width:100px;
    height:100px;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    position:relative;
    margin-bottom: 10px;
}
.clip1 {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:160px;
    clip:rect(0px, 100px, 100px, 50px);
}
.slice1 {
    position:absolute;
    width:100px;
    height:100px;
    clip:rect(0px, 50px, 100px, 0px);
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    background-color:#30BAE7;
    border-color:#30BAE7;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.clip2 {
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    clip:rect(0, 50px, 100px, 0px);
}
.slice2 {
    position:absolute;
    width:100px;
    height:100px;                                /*<- вот здесь была ошибка*/
    clip:rect(0px, 100px, 100px, 50px);
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
    border-radius:100%;
    background-color:#30BAE7;
    border-color:#30BAE7;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.status {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 74px;
    height: 64px;
    padding-top: 10px;
    border-radius: 100%;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    text-align: center;
    color: #3C4761;
    line-height: 20px;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pie pie-1">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>
<div class="pie pie-2">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>
<div class="pie pie-3">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status"></div>
</div>

9
  • Спасибо за пример! Ошибка понятна. Разве нельзя изменить размеры этого синего круга?
    – Sasha
    23 июл 2017 в 11:59
  • @Sasha размеры можно изменить. 24 июл 2017 в 5:35
  • Razmik Galstyan, а не могли бы Вы мне подсказать где именно нужно исправить? в моем коде. Я так понимаю у этих классов: .radial-progress .circle .mask , .radial-progress .circle .mask .fill . Меняю параметры, у меня белая маска "ломается" конкретно
    – Sasha
    25 июл 2017 в 7:57
  • @RazGalstyan хм, у меня скопированный код не работает как тут.
    – drtvader
    2 фев 2018 в 6:28
  • @drtvader а можно этот код увидеть например в jsfiddle? 2 фев 2018 в 7:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.