Вёрстка прогресс-бара

@Salvat · Регистрация: 30.11.2015

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

Подскажите пожалуйста, хочу у себя на сайте реализовать как вк рейтинг, данные берутся из MySQL и в зависимости от кол-во мне необходимо закрашивать поле. Я думал и пришел к двум вариантам, это закрашивать частино td или текстовое поле input.
На картинке видно что мне необходимо.

@Salvat · 03.07.2016, 18:45 **[ТС]**

Или это накладывается один элемент на другой и увеличивается размер в зависимости от %?

@mrtoxas · 03.07.2016, 19:55

HTML5
1
2
<div class="progressbar p25" data-position="25%"></div>
<div class="progressbar p73" data-position="75%"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.progressbar {
  width: 400px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  background: #bbdaf9;
  border: 1px solid #1e90ff;
  border-radius: 5px;
}
.progressbar:after {
  content: attr(data-position);
}
.p73 {
  background: -webkit-linear-gradient(left, #bbdaf9 73%, #ffffff 73%);
  background: linear-gradient(to right, #bbdaf9 73%, #ffffff 73%);
}
.p25 {
  background: -webkit-linear-gradient(left, #bbdaf9 25%, #ffffff 25%);
  background: linear-gradient(to right, #bbdaf9 25%, #ffffff 25%);
}

@Salvat · 03.07.2016, 20:24 **[ТС]**

mrtoxas, То что нужно, с помощью php изменяют размер полоски

Подскажите еще пожалуйста, каким образом можно наложить цвет поверх другого как на третьей картинке.

Добавлено через 9 минут
Со вторым примером пока не получается реализовать почему-то...

@mrtoxas · 03.07.2016, 20:33

C тремя цветами. Играйтесь с процентами

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.progressbar {
  width: 400px;
  padding: 5px;
  margin: 10px;
  text-align: center;
  background: #bbdaf9;
  border: 1px solid #1e90ff;
  border-radius: 5px;
  background: -webkit-linear-gradient(left, #7db9e8 33%, #d6d6d6 33%, #d6d6d6 66%, #7db9e8 66%, #ffffff 66%);
  background: linear-gradient(to right, #7db9e8 33%, #d6d6d6 33%, #d6d6d6 66%, #7db9e8 66%, #ffffff 66%);  
}
.progressbar:after {
  content: attr(data-position);
}

HTML5
1
<div class="progressbar" data-position="#%"></div>

Добавлено через 2 минуты
А что не получается?

@Hikari · 03.07.2016, 20:45

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

реализовать как вк рейтинг

А я бы https://webref.ru/html/progress использовала

@mrtoxas · 03.07.2016, 20:59

Hikari, привели бы уж тогда и код разукрашивания в 3 цвета

@Hikari · 03.07.2016, 22:18

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

привели бы уж тогда и код разукрашивания в 3 цвета

Не поняла что значит в три цвета...
И разве по ссылке нет примера?

@Salvat · 04.07.2016, 07:34 **[ТС]**

mrtoxas, спасибо еще раз

Вот рейтинг ВК 1к1, может кому пригодится.

HTML5
1
<div class="progressbar"  style='margin-top:-135px;margin-left:0px;<?php echo $rt; ?>'><?php echo $rating; ?></div>// тут под свои нужды подгоняйте отступы

CSS
1
2
3
4
5
6
7
8
9
10
.progressbar {
  width: 150px;
  padding: 1px;
  margin: 10px;
  text-align: center;
  background: #bbdaf9;
  border: 2px solid #ffffff;
  border-radius: 1px;
 
}

PHP
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
 if($rating == '100'){
         $rt =  '
  background: -webkit-linear-gradient(left, #7db9e8 '.$rating.'%, #d6d6d6 '.$rating.'%);
  background: linear-gradient(to right, #f5ebbb '.$rating.'%, #d6d6d6 '.$rating.'%);  
';
}elseif($rating > '100' && $rating < '1000'){
$rate_proc = $rating*10/100;
         $rt =  '
         
  background: -webkit-linear-gradient(left, #7db9e8 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);
  background: linear-gradient(to right, #e0d7a3 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);  
';
}elseif($rating > '1000' && $rating < '10000'){
$rate_proc = $rating*1/100;
         $rt =  '
         
  background: -webkit-linear-gradient(left, #7db9e8 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);
  background: linear-gradient(to right, #e0d7a3 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);  
';
}elseif($rating > '10000'){
$rate_proc = $rating*0.1/100;
 
         $rt =  '
         
  background: -webkit-linear-gradient(left, #7db9e8 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);
  background: linear-gradient(to right, #e0d7a3 '.$rate_proc.'%, #f5ebbb '.$rate_proc.'%);  
';
}else{
$rt = '
  background: -webkit-linear-gradient(left, #f7f7f7 '.$rating.'%, #f7f7f7 '.$rating.'%);
  background: linear-gradient(to right, #dae2e8 '.$rating.'%, #f7f7f7 '.$rating.'%);  
';
     
}

До 100 000.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Вёрстка прогресс-бара

Решение

Решение

Решение

@Salvat 12 / 11 / 8 Регистрация: 30.11.2015 Сообщений: 422

	Вёрстка прогресс-бара 03.07.2016, 18:41. Показов 4586. Ответов 8 Метки нет (Все метки) Подскажите пожалуйста, хочу у себя на сайте реализовать как вк рейтинг, данные берутся из MySQL и в зависимости от кол-во мне необходимо закрашивать поле. Я думал и пришел к двум вариантам, это закрашивать частино td или текстовое поле input. На картинке видно что мне необходимо. Изображения 0

@Salvat 12 / 11 / 8 Регистрация: 30.11.2015 Сообщений: 422
	03.07.2016, 18:45 [ТС]
	Или это накладывается один элемент на другой и увеличивается размер в зависимости от %? 0

@Salvat 12 / 11 / 8 Регистрация: 30.11.2015 Сообщений: 422
	03.07.2016, 20:24 [ТС]
	mrtoxas, То что нужно, с помощью php изменяют размер полоски Подскажите еще пожалуйста, каким образом можно наложить цвет поверх другого как на третьей картинке. Добавлено через 9 минут Со вторым примером пока не получается реализовать почему-то... 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.07.2016, 20:59
	Hikari, привели бы уж тогда и код разукрашивания в 3 цвета 0