Прогрес бар: Когда полоса заполняется > 80%, кусочек который >80% закрашивается в другой цвет.

@Maximka24 · Регистрация: 07.04.2014

Author24 — интернет-сервис помощи студентам

Всем привет!
Ребята, подскажите.

Нужно доработать прогресс бар)
Когда полоса заполняется > 80%, кусочек который >80% закрашивается в другой цвет.
Хелп)

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="total">
        <div class="part"></div>
        <div class="point"></div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="common.js"></script>
</body>
</html>

CSS

.total{
    background-color: #000;
    position: relative;
}
 
.part{
    height: 40px;
    background-color: yellow;
    width: 0;
}
 
.point{
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid red;
    width: 25%;
    height: 40px;
}

Javascript

$.fn.extend({
    progressBar: function () {
        var total = 1500;
        var sold = 1400;
        var progress = sold/total;
        var width = (progress*100);
 
 
        var $progressBar = $(this).children().first();
        $progressBar.css({position: 'relative'});
        $progressBar.append('<span class="percent">0%</span>');
        var $percent = $progressBar.find('.percent').css({position: 'absolute', 'right': 10, 'top': 14});
        $progressBar.animate({'width': width+'%'},
 
        {
            duration: 3000,
            progress: function (animation, _progress, remainingMs) {
 
                var percent = Math.round(width*_progress);
                $percent.html(percent+'%')
            }
        });
    }
});
 
$(document).ready(function() {
 
    $('.total').progressBar();
});

@Maximka24 · 19.07.2016, 22:40 **[ТС]**

Еще не решил)

@Kraken73 · 20.07.2016, 14:39

Сообщение от Maximka24

Когда полоса заполняется > 80%, кусочек который >80% закрашивается в другой цвет.

Ну как то так

Javascript

duration: 3000,
            progress: function (animation, _progress, remainingMs) {
    
                var percent = Math.round(width*_progress);
                $percent.html(percent+'%')
                if (percent > 80) {
                                $(".part").css("background-color","green");
                        }
            }

@Maximka24 · 20.07.2016, 22:14 **[ТС]**

Спасибо)))
Только нужно чтобы менял цвет не весь прогресс бар, а только часть от 80%

@Kraken73 · 21.07.2016, 08:34

Сообщение от Maximka24

Только нужно чтобы менял цвет не весь прогресс бар, а только часть от 80%

Тогда можно вот так

Javascript

 if (percent > 80) {
       $(".color_part").css("width",percent-80+"%");
       $(".color_part").fadeIn("normal");
}

HTML5

<div class="total">
        <div class="part">
          <div class="color_part"></div>
        </div>
        <div class="point"></div>
    </div>

CSS

.color_part {
  display:none;
  background:green;
  right:0;
  position:absolute;
  height:40px;
}

@asql · 21.07.2016, 13:14

можно кинуть в блок 2 инлайн-блока с width:0 и разными цветами - закрашивать их потом по очереди.
или динамически добавлять клонируемый элемент в блок и хоть каждый процент в новый цвет закрашивать. Еще есть градиент

@Kraken73 · 21.07.2016, 14:25

Я пробовал, но он окрашивает % от заполненной полоски , а не от всей.

@asql · 21.07.2016, 14:39

то что ты хочешь наверное градиентом не получитсо, ибо он всегда (на протяжении всей загрузки) будет в конце красить

Добавлено через 2 минуты
так что создавай инлайн блок и растягивай его до 80%, а потом клонируй, меняй цвет и растягивай до 20

Добавлено через 9 минут
если есть желание можешь создать рекурсивную функцию

@Kraken73 · 21.07.2016, 15:27

Сообщение от asql

так что создавай инлайн блок и растягивай его до 80%, а потом клонируй, меняй цвет и растягивай до 20

Чем мое решение не нравится то?

@Maximka24 · 21.07.2016, 21:28 **[ТС]**

Спасибо за помощь))
http://jsfiddle.net/9fDy3/
Нашел такое вот) Это то что нужно, только мне не подходит, так как оно не респонсив((

Еще есть вариант через градиент, но там тоже есть нюанс, нужно правильно подобрать коэфициент этого градинта, что тоже сложно...
В идеале написать самому на JS но пока это сложно для меня(((

@evikza · 21.07.2016, 22:45

Maximka24, респонзив легко прикрутить

Javascript

$("#progressbar").progressbar({
  value: 0,
  create: function(event, ui, showWidth) {
    var progress = $(this);
    var progressvalue = progress.children(".ui-progressbar-value");
    progressvalue.css("overflow", "hidden");
    var wrapper = $("<div>");
    function showWidth(n) {
      var pwv = progress.width();
      wrapper.css({
        "width": pwv,
        "height": "100%",
        "display": "block"
      });
    };
    showWidth();
    $(window).resize(function() {
      showWidth();
    });
    progressvalue.append(wrapper);
    var segment = $("<span>");
    segment.css({
      "width": "80%",
      "height": "100%",
      "display": "block",
      "background": "#34495e",
      "float": "left"
    });
    wrapper.append(segment);
    segment = $("<span>");
    segment.css({
      "width": "20%",
      "height": "100%",
      "display": "block",
      "background": "#3498db",
      "float": "left"
    });
    wrapper.append(segment);
  }
});
 
var interval = setInterval(function() {
  var value = $('#progressbar').progressbar('option', 'value') + 1;
  if (value <= 100) {
    $('#progressbar').progressbar({
      value: value
    });
  } else {
    clearInterval(interval);
  }
}, 20);

Пример: https://jsfiddle.net/tL6cbjc8/6/

@Maximka24 · 21.07.2016, 22:58 **[ТС]**

Спасибо Вам

@asql · 22.07.2016, 09:03

Сообщение от Maximka24

В идеале написать самому на JS но пока ...

А жаль...

@Maximka24 · 22.07.2016, 11:22 **[ТС]**

evikza А можете пожалуйста подсказать как сделать цифру с процентом респонив, чтобы она 'бежала' вместе с прогресс баром. У меня не получается респонсив(((
Заранее спасибо!

@Maximka24 · 24.07.2016, 23:41 **[ТС]**

HTML5

1
2
3

<div class="head">
    <div class="progress-label">Два слова</div>
</div>

CSS

.progress-label{
    position: absolute
    width: 103px
    top: 7px
    font-size: 16px
}

Javascript

var interval = setInterval(function() {
var value = $('.head').progressbar('option', 'value') + 1;
var progressLabel = $( ".progress-label" );
 
if (value <= 96) {
    $('.head').progressbar({
      value: value
    });
    } else {
       clearInterval(interval);
}
valueNum = value - 8;
progressLabel.css({left: valueNum +'%'});

Подскажите как сделать респонсив)
Нужно чтобы 'два слова' двигались вместе с прогрессбаром. Не могу придумать респонсив(((

Добавлено через 6 часов 14 минут
Спасибо, разобрался сам)))

@asql · 25.07.2016, 08:46

Maximka24, а может проще .head{text-align:right;} ?

@Maximka24 · 25.07.2016, 11:57 **[ТС]**

asql
Да, проще)

Я сделал так

CSS

.progress-label{
   position: absolute;
   right: 15px;
   top: 8px;
}

Javascript

1	$('.progress-label').appendTo($('.ui-progressbar-value'));

@Maximka24 · 08.08.2016, 21:07 **[ТС]**

Всем привет)))

Все-таки хочу допилить свой код,
Подскажите плс как сделать два цвета на прогресс бар)

Спасибо!

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="total">
        <div class="part"></div>
        <div class="point"></div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="common.js"></script>
</body>
</html>

CSS

.total{
    background-color: #000;
    position: relative;
}
 
.part{
    height: 40px;
    background-color: yellow;
    width: 0;
}
 
.point{
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid red;
    width: 25%;
    height: 40px;
}

Javascript

$.fn.extend({
    progressBar: function () {
        var total = 1500;
        var sold = 1400;
        var progress = sold/total;
        var width = (progress*100);
 
 
        var $progressBar = $(this).children().first();
        $progressBar.css({position: 'relative'});
        $progressBar.append('<span class="percent">0%</span>');
        var $percent = $progressBar.find('.percent').css({position: 'absolute', 'right': 10, 'top': 14});
        $progressBar.animate({'width': width+'%'},
 
        {
            duration: 3000,
            progress: function (animation, _progress, remainingMs) {
 
                var percent = Math.round(width*_progress);
                $percent.html(percent+'%')
            }
        });
    }
});
 
$(document).ready(function() {
 
    $('.total').progressBar();
});

@deller · 08.08.2016, 21:40

В вашем коде не получится сменить цвет по достижении точки. Т.к. этот код исполняется 1 раз и анимацией увеличивает прогрессбар.

@Maximka24 · 08.08.2016, 21:50 **[ТС]**

А какие есть варианты решения?
Хоть подсказку, хоть зацепку....

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	21.07.2016, 22:58 [ТС]	12
	Спасибо Вам 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	19.07.2016, 22:40 [ТС]	2
	Еще не решил) 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	20.07.2016, 22:14 [ТС]	4
	Спасибо))) Только нужно чтобы менял цвет не весь прогресс бар, а только часть от 80% 0

@asql 76 / 77 / 40 Регистрация: 03.06.2014 Сообщений: 463
	21.07.2016, 13:14	6
	можно кинуть в блок 2 инлайн-блока с width:0 и разными цветами - закрашивать их потом по очереди. или динамически добавлять клонируемый элемент в блок и хоть каждый процент в новый цвет закрашивать. Еще есть градиент 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 611
	21.07.2016, 14:25	7
	Я пробовал, но он окрашивает % от заполненной полоски , а не от всей. 0

@asql 76 / 77 / 40 Регистрация: 03.06.2014 Сообщений: 463
	21.07.2016, 14:39	8
	то что ты хочешь наверное градиентом не получитсо, ибо он всегда (на протяжении всей загрузки) будет в конце красить Добавлено через 2 минуты так что создавай инлайн блок и растягивай его до 80%, а потом клонируй, меняй цвет и растягивай до 20 Добавлено через 9 минут если есть желание можешь создать рекурсивную функцию 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 611
	21.07.2016, 15:27	9
	Сообщение от asql так что создавай инлайн блок и растягивай его до 80%, а потом клонируй, меняй цвет и растягивай до 20 Чем мое решение не нравится то? 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	21.07.2016, 21:28 [ТС]	10
	Спасибо за помощь)) http://jsfiddle.net/9fDy3/ Нашел такое вот) Это то что нужно, только мне не подходит, так как оно не респонсив(( Еще есть вариант через градиент, но там тоже есть нюанс, нужно правильно подобрать коэфициент этого градинта, что тоже сложно... В идеале написать самому на JS но пока это сложно для меня((( 0

@asql 76 / 77 / 40 Регистрация: 03.06.2014 Сообщений: 463
	22.07.2016, 09:03	13
	Сообщение от Maximka24 В идеале написать самому на JS но пока ... А жаль... 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	22.07.2016, 11:22 [ТС]	14
	evikza А можете пожалуйста подсказать как сделать цифру с процентом респонив, чтобы она 'бежала' вместе с прогресс баром. У меня не получается респонсив((( Заранее спасибо! 0

@asql 76 / 77 / 40 Регистрация: 03.06.2014 Сообщений: 463
	25.07.2016, 08:46	16
	Maximka24, а может проще .head{text-align:right;} ? 0

@deller 20 / 25 / 12 Регистрация: 26.06.2013 Сообщений: 111
	08.08.2016, 21:40	19
	В вашем коде не получится сменить цвет по достижении точки. Т.к. этот код исполняется 1 раз и анимацией увеличивает прогрессбар. 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	08.08.2016, 21:50 [ТС]	20
	А какие есть варианты решения? Хоть подсказку, хоть зацепку.... 0

Прогрес бар: Когда полоса заполняется > 80%, кусочек который >80% закрашивается в другой цвет.

Решение