0

Верстаю сайт, есть там такой прогресс бар

введите сюда описание изображения

Как его такой наверстать?... Или скриптами делается это?

user190134
  • 2,224
  • http://jsfiddle.net/andsens/mLA7X/ – labris Apr 12 '17 at 11:36
  • https://codepen.io/geedmo/pen/InFfd – nueq Apr 12 '17 at 12:02
  • Помимо того, что это дубликат, есть подобные рекомендации еще в одном вопросе: http://ru.stackoverflow.com/questions/628257/%D0%9A%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81-%D0%B1%D0%B0%D1%80 – Sasha Omelchenko Apr 12 '17 at 14:20

2 Answers2

1

Идея такая нарисовать круг

.div-in{
  margin: auto;
  border-radius: 50%;
  background: red;
  height: 200px;
  width: 200px;
  position: relative;
  top: 25px;
}
.div-out{
position:relative;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,0);
  border: 4px solid black;
  height: 250px;
  width: 250px;
}
.progres{
  position:absolute;
  width: 0;
 height: 0;
 border-top: 125px solid red; 
 border-right: 100px solid transparent;
  left: 120px;
}
.out{
overflow:hidden;
  position:relative;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,0);
  height: 260px;
  width: 260px;
}
<div class="out">
<div class="progres"></div>
<div class="div-out">
<div class="div-in">

</div>
</div>
</div>

Делим на 4 части, каждый блок стилизуем как, то так: В классе progress: border-right меняем от нуля до 1000px,потом border-top и border-right меняем на border, остальные четверти аналогично.

Ghost
  • 649
1

Нашел плагин для jQuery, в который можно подставиь картинку, и оно само заполнять будет в зависимости от параметра: value

https://github.com/kottenator/jquery-circle-progress

$('#circle').circleProgress({
    value: 0.33,//33% заполнеено
    thickness: 31,// Толщина круга
    size: 211,// ширина-высота
    fill: { image: 'images/load.png' }// картинка
});
user190134
  • 2,224