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

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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$.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
1
2
3
4
5
6
7
8
9
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
1
2
3
4
 if (percent > 80) {
       $(".color_part").css("width",percent-80+"%");
       $(".color_part").fadeIn("normal");
}

HTML5
1
2
3
4
5
6
<div class="total">
        <div class="part">
          <div class="color_part"></div>
        </div>
        <div class="point"></div>
    </div>

CSS
1
2
3
4
5
6
7
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$("#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
1
2
3
4
5
6
.progress-label{
    position: absolute
    width: 103px
    top: 7px
    font-size: 16px
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
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
1
2
3
4
5
.progress-label{
   position: absolute;
   right: 15px;
   top: 8px;
}

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

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

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

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

Спасибо!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$.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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .	Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .	Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .
Раскрываем внутренние механики Android с помощью контекста и манифеста mobDevWorks 07.07.2025 Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .	API на базе FastAPI с Python за пару минут AI_Generated 07.07.2025 FastAPI - это относительно молодой фреймворк для создания веб-API, который за короткое время заработал бешеную популярность в Python-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .	Основы WebGL. Раскрашивание вершин с помощью VBO 8Observer8 05.07.2025 На русском https:/ / vkvideo. ru/ video-231374465_456239020 На английском https:/ / www. youtube. com/ watch?v=oskqtCrWns0 Исходники примера:	Мониторинг микросервисов с OpenTelemetry в Kubernetes Mr. Docker 04.07.2025 Проблема наблюдаемости (observability) в Kubernetes - это не просто вопрос сбора логов или метрик. Это целый комплекс вызовов, которые возникают из-за самой природы контейнеризации и оркестрации. К. . .	Проблемы с Kotlin и Wasm при создании игры GameUnited 03.07.2025 В современном мире разработки игр выбор технологии - это зачастую балансирование между удобством разработки, переносимостью и производительностью. Когда я решил создать свою первую веб-игру, мой. . .

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

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

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

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

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

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

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

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

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

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

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

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

Решение