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

Question

[EarthFM]

Как сделать круговой прогресс на javascript-e без JQuery?
Что должно двигаться(какое свойство), чтобы полоса крутилась по кругу.

Answer 1

[A K]

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

Comments

[EarthFM]

Имеется ввиду, чтобы он не крутился полностью) а с 0 до определённого процента загрузилась полоска. Например, чтобы изменить положение объекта используется свойство left, а какое свойство здесь используется?)

[A K]

Давно делал под jq jsfiddle.net/Symphony/GpkX8/1 (кликаем в центре круга) . Могу завтра переписать на чистом js

[EarthFM]

@Symphony , прикольно) если не трудно, то заранее спасибо) просто JQuery не знаю, даже не хочу его трогать пока js не пойму нормально)

[EarthFM]

@Symphony , как здесь blakek.us/labs/jquery/css3-pie-graph-timer , но опять JQuery)

[A K]

jsfiddle.net/Symphony/yp3zd55z - код довольно простой, думаю, разберетесь

[EarthFM]

@Symphony, спасибо большое)

Answer 2

[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, поэтому их можно смело ставить несколько.

Посмотреть как оно работает

Answer 3

[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

Answer 4

[Александр Таратин]

raphaeljs.com/polar-clock.html

Comments

[EarthFM]

Спасибо, но для меня пока это слишком сложно) и посмотрев всё равно не понял, какое свойство надо менять, чтобы двигалось)

[Александр Таратин]

@EarthFM зато это самый кроссплатформенный вариант. Работает от ie 5.5

[Егор]

Троит на 12 часов, имейте в виду

Answer 5

[Kir]

Через border-radius и ширину бордера.
Посмотрите пример, думаю его можно заставить работать по аналогии с процентовкой
www.alessioatzeni.com/wp-content/tutorials/html-cs...