Создать круг с анимацией заполнения со своей картинкой

247

13 апреля 2017, 17:28

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

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

Answer 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' }// картинка
});

Answer 2

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

.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, остальные четверти аналогично.