Ответы пользователя по тегу CSS
  • Как сделать круговой прогресс?

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

    Посмотреть как оно работает
    Ответ написан
    Комментировать