Как сделать круговой прогресс?

Как сделать круговой прогресс на javascript-e без JQuery?
Что должно двигаться(какое свойство), чтобы полоса крутилась по кругу.
  • Вопрос задан
  • 4734 просмотра
Решения вопроса 3
Symphony
@Symphony Куратор тега CSS
css3:
div {
    position: absolute;
    margin: 120px;
    width: 120px;
    height: 120px;
    -webkit-animation: infinite rotate-block 2s;
    -moz-animation: infinite rotate-block 2s;
    -o-animation: infinite rotate-block 2s;
    animation: infinite rotate-block 2s;
    border-left:10px solid #f15466;
    border-radius: 50%
}
@-webkit-keyframes rotate-block {
  0%   {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate-block {
  0%   {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-block {
  0%   {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes rotate-block {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

jsfiddle.net/Symphony/qc4huwnx/1
Ответ написан
@JetFightzer
Сам давно интересовался. Сейчас придумал такое решение, минимум css и js кода, без фреймворков и должно работать на всех современных браузерах.

CSS
.pie
{
	position: relative;
	margin: 200px auto 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
}

.pieone, .pietwo, .pieone div, .pietwo div
{
	position: absolute;
	top: 0;
	left: 0;
}

.pie > div > div
{
	width: 100px;
	height: 100px;
	border: solid 20px #66AAFF;
	border-radius: 50%;
	clip: rect(0px, 70px, 140px, 0px);
}

.pieone
{
	clip: rect(0px, 140px, 140px, 70px);
}

.pietwo
{
	clip: rect(0px, 70px, 140px, 0px);
}

.pietwo div
{
	display: none;
}


HTML
<div id="myPie" class="pie">
	<div class="pieone"><div></div></div>
	<div class="pietwo"><div></div></div>
</div>


JS
function pie(id, deg)
{
	var oneStyle = document.getElementById(id).querySelector(".pieone > div").style
	var twoStyle = document.getElementById(id).querySelector(".pietwo > div").style


	if(deg > 180)
	{
		oneStyle.transform = oneStyle.webkitTransform = "rotate(180deg)"
		twoStyle.transform = twoStyle.webkitTransform = "rotate(" + deg + "deg)"
		twoStyle.display = "block"
	}
	else
	{
		oneStyle.transform = oneStyle.webkitTransform = "rotate(" + deg + "deg)"
		twoStyle.display = "none"
	}
}

// Пример работы
deg = 0
setInterval(function() { pie("myPie", (deg += 15) % 360) }, 100)


Функция работает с таймером по id, поэтому их можно смело ставить несколько.

Посмотреть как оно работает
Ответ написан
Комментировать
@VXP
Зачем же всё настолько усложнять? Мне кажется, этот вариант идеально подойдёт.

<img id="image" src="http://i.stack.imgur.com/bdrWh.png">
<script>
var image = document.getElementById( "image" );
var test = 0;
setInterval(function() {
	if( test >= 360 ) test = 0;
	test = test + 1;
	image.style.transform="rotate("+test+"deg)";
}, 1);
</script>


jsfiddle.net/UAVXP/ekmtqq6r
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
@angry_bender
PHP, JS
Через border-radius и ширину бордера.
Посмотрите пример, думаю его можно заставить работать по аналогии с процентовкой
www.alessioatzeni.com/wp-content/tutorials/html-cs...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы