Javascript 径向进度条不会改变颜色
我发现动画径向进度条大多使用CSS。主要是我需要显示227% 我想做的动画是在100%和200%之后改变条的颜色。 我一直在尝试使用.css和.removeClassloader-spiner，这是主类和.addClass-loader-spiner-100，我也一直在尝试使用.attr添加我自己的样式，但它输出的不是函数或类似的smth 你能帮我做这个吗Javascript 径向进度条不会改变颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我发现动画径向进度条大多使用CSS。主要是我需要显示227% 我想做的动画是在100%和200%之后改变条的颜色。 我一直在尝试使用.css和.removeClassloader-spiner，这是主类和.addClass-loader-spiner-100，我也一直在尝试使用.attr添加我自己的样式，但它输出的不是函数或类似的smth 你能帮我做这个吗 圆的颜色由.loader spiner的边框颜色决定。您可以使用类似$'.loader spiner.css{'border-color'：
圆的颜色由.loader spiner的边框颜色决定。您可以使用类似$'.loader spiner.css{'border-color'：'f00'}；的东西轻松地设置它；。 下面是一个示例，我还创建了一个新变量progressRound来重置装载机微调器： $document.readyfunction{ 函数renderProgressprogress { 进度=数学.floorprogress； var progressRound=进度； 当程序循环>100时{ progressRound-=100； 明确进展； } 如果progressRound=25&&progressRound=50&&progressRound=75&&progressRound 227{ i=0 明确进展； } 渲染进度； }, 50; }; .加载器{ 位置：相对位置； 宽度：50px； 高度：50px； 浮动：左； -webkit用户选择：无； -moz用户选择：无； -o-用户选择：无； 用户选择：无； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .加载器背景 { 宽度：100%； 身高：100%； 边界半径：50%； 边框：5px实心F7F7； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .spiner-holder-1 { 位置：绝对位置； 排名：0； 左：0； 溢出：隐藏； 宽度：50%； 身高：50%； 背景：透明； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .spiner-holder-2 { 位置：绝对位置； 排名：0； 左：0； 溢出：隐藏； 宽度：100%； 身高：100%； 背景：透明； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .装载机尖刺机 { 宽度：200%； 身高：200%； 边界半径：50%； 边框：5px实心66c1d1； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .装载机-spiner-100 { 宽度：200%； 身高：200%； 边界半径：50%； 边框：5px纯黑； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； 框大小：边框框； } .动画-0-25-a { -webkit变换：旋转90度； -moz变换：旋转90度； -o变换：旋转90度； 变换：旋转90度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-0-25-b { -webkit变换：旋转-90度； -moz变换：旋转-90度； -o变换：旋转-90度； 变换：旋转-90度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-25-50-a { -webkit变换：旋转180度； -莫兹变换：旋转180度； -o变换：旋转180度； 变换：旋转180度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-25-50-b { -webkit变换：旋转-90度； -moz变换：旋转-90度； -o变换：旋转-90度； 变换：旋转-90度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-50-75-a { -webkit变换：旋转270度； -莫兹变换：旋转270度； -o变换：旋转270度； 变换：旋转270度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-50-75-b { -webkit变换：旋转-90度； -moz变换：旋转-90度； -o变换：旋转-90度； 变换：旋转-90度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-75-100-a { -webkit变换：旋转0度； -moz变换：旋转0度； -o变换：旋转0度； 变换：旋转0度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } .动画-75-100-b { -webkit变换：旋转-90度； -moz变换：旋转 e-90度； -o变换：旋转-90度； 变换：旋转-90度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -o-变换原点：100%100%； 变换原点：100%100%； } 文本 { 文本对齐：居中； 填充顶部：26%； 字体大小：12px； 颜色：a1a5a5； 字体系列：“副翼灯”； }
添加第二组规则以适应100+的进度将允许您从本质上重置它，尽管它确实添加了更多的代码 下面是简单地重复使用您原来的规则集超过100
else if(progress<125){
var angle = -90 + (progress/100)*360;
$(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
}
else if(progress>=125 && progress<150){
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>=150 && progress<175){
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>=175 && progress<=200){
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)");
}
我也尝试过，使用$'.loader spiner'.css{'border'：'5px solid black'}；我在答案中添加了修改过的代码。这有助于你理解我的意思吗？好吧，你帮了我一点忙。我一直在寻找继承新背景的解决方案，但你指导得很好：谢谢。以下是我的解决方案：
else if(progress<125){
var angle = -90 + (progress/100)*360;
$(".animate-0-25-b").css("transform","rotate("+angle+"deg)");
}
else if(progress>=125 && progress<150){
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>=150 && progress<175){
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>=175 && progress<=200){
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)");
}