径向进度条不会改变颜色

时间：2015-06-13 19:18:03

标签： javascript jquery html css

我主要使用CSS找到了动画径向进度条。主要是我需要显示227％。

我想制作的动画是在100％和200％之后更改条形颜色。 我一直在尝试使用.css和.removeClass（loader-spiner）这是主类和.addClass（loader-spiner-100），我也一直试图用.attr来添加我的自己的风格，但它输出那些不是功能或smth那样。

请帮帮我吗？

http://jsfiddle.net/artofbw/qgqren9e/ 

$(document).ready(function () {

        function renderProgress(progress)
    {
        progress = Math.floor(progress);

        if(progress<25){
            var angle = -90 + (progress/100)*360;
            $(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progress>=25 && progress<50){
            var angle = -90 + ((progress-25)/100)*360;
            $(".animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-25-50-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progress>=50 && progress<75){
            var angle = -90 + ((progress-50)/100)*360;
            $(".animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-50-75-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progress>=75 && progress<=100){
            var angle = -90 + ((progress-75)/100)*360;
            $(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-75-100-b").css("transform","rotate("+angle+"deg)");
        }
        if(progress==100) {
            alert('first');
        }
        if(progress==200) {
            alert('second');
        }
        if(progress==227){
            clearInterval(int);
        }
        $(".text").html(progress+"%");
    }

    function clearProgress()
    {
        $(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform","rotate(90deg)");
    }

    var i=0;
    var int = setInterval(function (){
                    i++;
                    if(i>227) {
                        i=0
                        clearProgress();
                    }
                    renderProgress(i);
    }, 50);

});

3 个答案:

答案 0 :(得分：0)

圆圈的颜色由.loader-spiner的borderColor决定。您可以使用$('.loader-spiner').css({'border-color': '#f00'});之类的内容轻松设置此项。 这是一个例子（我还创建了一个新的变量progressRound到＆＃34;重置＆＃34;加载器 - 微调器）：

＆＃13;
＆＃13; 
$(document).ready(function () {

        function renderProgress(progress)
    {
        progress = Math.floor(progress);
        
        var progressRound = progress;
        while(progressRound > 100){
            progressRound -= 100;
            clearProgress();
        }

        if(progressRound<25){
            var angle = -90 + (progressRound/100)*360;
            $(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progressRound>=25 && progressRound<50){
            var angle = -90 + ((progressRound-25)/100)*360;
            $(".animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-25-50-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progressRound>=50 && progressRound<75){
            var angle = -90 + ((progressRound-50)/100)*360;
            $(".animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-50-75-b").css("transform","rotate("+angle+"deg)");
        }
        else if(progressRound>=75 && progressRound<=100){
            var angle = -90 + ((progressRound-75)/100)*360;
            $(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform","rotate(0deg)");
            $(".animate-75-100-b").css("transform","rotate("+angle+"deg)");
        }
        if(progress==100) {
            $(".loader-spiner").css({ "border-color": "#f00" });
        }
        if(progress==200) {
            $(".loader-spiner").css({ "border-color": "#0f0" });
        }
        if(progress==227){
            clearInterval(int);
        }
        $(".text").html(progress+"%");
    }

    function clearProgress()
    {
        $(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css("transform","rotate(90deg)");
    }

    var i=0;
    var int = setInterval(function (){
                    i++;
                    if(i>227) {
                        i=0
                        clearProgress();
                    }
                    renderProgress(i);
    }, 50);
    
});
＆＃13; 
.loader{
    position: relative;
    width: 50px;
    height: 50px;
    float:left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.loader-bg
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #f7f7f7;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.spiner-holder-1
{
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 50%;
    height: 50%;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.spiner-holder-2
{
    position: absolute;
    top:0;
    left:0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.loader-spiner
{
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 5px solid #66c1d1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}  

.loader-spiner-100
{
    width: 200%;
    height: 200%;
    border-radius: 50%;
    border: 5px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}  
  .animate-0-25-a
{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-0-25-b
{   
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-25-50-a
{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform: rotate(180deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-25-50-b
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-50-75-a
{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-50-75-b
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin:100% 100%;
}
.animate-75-100-a
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.animate-75-100-b
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    transform-origin: 100% 100%;
}
.text
{
    text-align: center;
    padding-top:26%;
    font-size: 12px;     
    color: #a1a5a5;
    font-family: 'aileronlight';
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width: 100%; height: 200px;">
              <div style="width: 33.3%; height: 200px; float:left; position: relative;">




                <div class="loader" style="width: 100px; height: 100px; top: 47px;left: 67px;">
                        <div class="loader-bg" style="border-width: 10px;">
                            <div class="text" style="font-size: 22px; padding-top:32%;"></div>
                        </div>        
                            <div class="spiner-holder-1 animate-0-25-a">
                                        <div class="spiner-holder-2 animate-0-25-b">
                                            <div class="loader-spiner" style="border-width: 10px;"></div>
                                        </div>
                                </div>

                                <div class="spiner-holder-1 animate-25-50-a">
                                        <div class="spiner-holder-2 animate-25-50-b">
                                            <div class="loader-spiner" style="border-width: 10px;"></div>
                                        </div>
                                </div>


                                <div class="spiner-holder-1 animate-50-75-a">
                                        <div class="spiner-holder-2 animate-50-75-b">
                                            <div class="loader-spiner" style="border-width: 10px;"></div>
                                        </div>
                                </div>


                                <div class="spiner-holder-1 animate-75-100-a">
                                        <div class="spiner-holder-2 animate-75-100-b">
                                            <div class="loader-spiner" style="border-width: 10px;"></div>
                                        </div>
                                </div>

                    </div>



              </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

添加第二组规则以适应100+的进度将允许您实质上重置它，尽管它确实添加了更多的代码。

以下只是在超过100后重复使用原始规则。

React.createElement("span", null,
  "Test ",
  React.createElement("a", {href: "google.com"},
    "google.com"
  ), 
  " link"
)

答案 2 :(得分：0)

这是我的解决方案;）

＆＃13;
＆＃13; 
$(document).ready(function () {

	function renderProgress(progress) {
		progress = Math.floor(progress);

		if (progress < 25) {
			angle = -90 + (progress / 100) * 360;
			$(".animate-0-25-b").css(fillRotateStyles(angle));
		} else if (progress >= 25 && progress < 50) {
			angle = -90 + ((progress - 25) / 100) * 360;
			$(".animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-25-50-b").css(fillRotateStyles(angle));
		} else if (progress >= 50 && progress < 75) {
			var angle = -90 + ((progress - 50) / 100) * 360;
			$(".animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-50-75-b").css(fillRotateStyles(angle));
		} else if (progress >= 75 && progress <= 100) {
			angle = -90 + ((progress - 75) / 100) * 360;
			$(".animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-75-100-b").css(fillRotateStyles(angle));
		} else if (progress > 100 && progress <= 125) {
			angle = -90 + (progress / 100) * 360;
			$(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-100-125-b").css(fillRotateStyles(angle));
		} else if (progress > 125 && progress <= 150) {
			angle = -90 + ((progress - 25) / 100) * 360;
			$(".animate-100-125, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-125-150-b").css(fillRotateStyles(angle));
		} else if (progress > 150 && progress <= 175) {
			angle = -90 + ((progress - 50) / 100) * 360;
			$(".animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-150-175-b").css(fillRotateStyles(angle));
		} else if (progress > 175 && progress <= 200) {
			angle = -90 + ((progress - 75) / 100) * 360;
			$(".animate-150-175, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-175-200-b").css(fillRotateStyles(angle));
		} else if (progress > 200 && progress <= 225) {
			angle = -90 + (progress / 100) * 360;
			$(".animate-175-200-b, .animate-150-175-b, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-200-225-b").css(fillRotateStyles(angle));
		} else if (progress > 225 && progress <= 250) {
			angle = -90 + ((progress - 25) / 100) * 360;
			$(".animate-200-225-b, .animate-175-200-b, .animate-150-175-b, .animate-125-150-b, .animate-100-125-b, .animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(0));
			$(".animate-225-250-b").css(fillRotateStyles(angle));
		}
		if (progress == 227) {
			clearInterval(int);
		}
		$(".text").html(progress + "%");
	}

	function clearProgress() {
		$(".animate-75-100-b, .animate-50-75-b, .animate-25-50-b, .animate-0-25-b").css(fillRotateRestart(90));
	}

	var i = 0;
	var int = setInterval(function () {
		i++;
		if (i > 227) {
			i = 0
			clearProgress();
		}
		renderProgress(i);
	}, 50);

	function fillRotateStyles(angle) {
		return {
			'-webkit-transform': 'rotate(' + angle + 'deg)',
			'-moz-transform': 'rotate(' + angle + 'deg)',
			'-ms-transform': 'rotate(' + angle + 'deg)',
			'-o-transform': 'rotate(' + angle + 'deg)',
			'transform': 'rotate(' + angle + 'deg)'
		};
	}

	function fillRotateRestart(amount) {
		return {
			'-webkit-transform': 'rotate(' + amount + 'deg)',
			'-moz-transform': 'rotate(' + amount + 'deg)',
			'-ms-transform': 'rotate(' + amount + 'deg)',
			'-o-transform': 'rotate(' + amount + 'deg)',
			'transform': 'rotate(' + amount + 'deg)'
		};
	}

});
＆＃13; 
.loader {
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 100px;
	height: 100px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.loader-bg {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 5px solid #c6c6c6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.spiner-holder-1 {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 50%;
	height: 50%;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.spiner-holder-2 {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.loader-spiner {
	width: 200%;
	height: 200%;
	border-radius: 50%;
	border: 5px solid #478792;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.loader-spiner-100 {
	width: 200%;
	height: 200%;
	border-radius: 50%;
	border: 5px solid #66c1d1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.loader-spiner-200 {
	width: 200%;
	height: 200%;
	border-radius: 50%;
	border: 5px solid #478792;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}


.animate-0-25-a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-0-25-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-25-50-a {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-25-50-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-50-75-a {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-50-75-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-75-100-a {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-75-100-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-100-125-a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-100-125-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-125-150-a {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-125-150-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-150-175-a {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-150-175-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-175-200-a {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-175-200-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
.animate-200-225-a {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-200-225-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
.animate-225-250-a {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.animate-225-250-b {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}
.text {
	text-align: center;
	padding-top: 34%;
	font-size: 22px;
	color: #a1a5a5;
	font-family: 'aileronlight';
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="progress-bar">

<div>



	<div class="loader">
		<div class="loader-bg" style="border-width: 10px;">
			<div class="text"></div>
		</div>
		<div class="spiner-holder-1 animate-0-25-a">
			<div class="spiner-holder-2 animate-0-25-b">
				<div class="loader-spiner" style="border-width: 10px;"></div>
			</div>
		</div>

		<div class="spiner-holder-1 animate-25-50-a">
			<div class="spiner-holder-2 animate-25-50-b">
				<div class="loader-spiner" style="border-width: 10px;"></div>
			</div>
		</div>


		<div class="spiner-holder-1 animate-50-75-a">
			<div class="spiner-holder-2 animate-50-75-b">
				<div class="loader-spiner" style="border-width: 10px;"></div>
			</div>
		</div>


		<div class="spiner-holder-1 animate-75-100-a">
			<div class="spiner-holder-2 animate-75-100-b">
				<div class="loader-spiner" style="border-width: 10px;"></div>
			</div>
		</div>



		<div class="spiner-holder-1 animate-100-125-a">
			<div class="spiner-holder-2 animate-100-125-b">
				<div class="loader-spiner-100" style="border-width: 10px;"></div>
			</div>
		</div>

		<div class="spiner-holder-1 animate-125-150-a">
			<div class="spiner-holder-2 animate-125-150-b">
				<div class="loader-spiner-100" style="border-width: 10px;"></div>
			</div>
		</div>


		<div class="spiner-holder-1 animate-150-175-a">
			<div class="spiner-holder-2 animate-150-175-b">
				<div class="loader-spiner-100" style="border-width: 10px;"></div>
			</div>
		</div>


		<div class="spiner-holder-1 animate-175-200-a">
			<div class="spiner-holder-2 animate-175-200-b">
				<div class="loader-spiner-100" style="border-width: 10px;"></div>
			</div>
		</div>
		<div class="spiner-holder-1 animate-200-225-a">
			<div class="spiner-holder-2 animate-200-225-b">
				<div class="loader-spiner-200" style="border-width: 10px;"></div>
			</div>
		</div>
		<div class="spiner-holder-1 animate-225-250-a">
			<div class="spiner-holder-2 animate-225-250-b">
				<div class="loader-spiner-200" style="border-width: 10px;"></div>
			</div>
		</div>


	</div>



</div>

<!--/progress bar animation-->

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题