我想要实现的目标
我已经创建了一个自定义的SVG加载器,但对SVG来说是新手,我不太熟悉它们的样式.我试图让我的新装载机,如下面的第一个片段所示,以匹配我的第二个片段中看到的我的其他装载机的外观.
我的自定义SVG加载器目前是什么样的
$('#start').click(function() {
$('#circle_1_top').toggleClass('circleAnimationOn');
$('#circle_1_bottom').toggleClass('circleAnimationOn');
$('#line_1').delay(1000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_2_top').delay(2000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#circle_2_bottom').delay(2000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#line_2').delay(3000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_3_top').delay(4000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#circle_3_bottom').delay(4000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#line_3').delay(5000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_4_top').delay(6000).queue(function() {
$(this).toggleClass('lastCircleAnimationOn');
$(this).dequeue();
});
$('#circle_4_bottom').delay(6000).queue(function() {
$(this).toggleClass('lastCircleAnimationOn');
$(this).dequeue();
});
});html,
body {
background: #000000 !important;
}
.circle {
cy: 37.5;
r: 30;
stroke: #3498db;
stroke-width: 1;
fill: none;
stroke-dasharray: 188.19107055664062px;
stroke-dashoffset: -188.19107055664062px;
transform-origin: center;
filter: url(#dropshadow);
}
.top {
transform: scale(-1, 1) rotate(1deg);
}
.bottom {
transform: rotate(181deg);
}
.circleAnimationOn {
stroke-dashoffset: -93px;
transition: stroke-dashoffset 1s linear
}
.lastCircleAnimationOn {
stroke-dashoffset: -93px;
}
.line {
stroke: #3498db;
stroke-width: 1;
stroke-dasharray: 108px;
stroke-dashoffset: 108px;
filter: url(#dropshadow);
}
.lineAnimationOn {
stroke-dashoffset: 0px;
transition: stroke-dashoffset 1s linear
}
/* Trigger button for javascript */
a {
text-decoration: none;
color: #00c6ff;
}
.trigger,
.triggerFull,
.triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin: 0 205px;
width: 140px;
}
.trigger:hover,
.triggerFull:hover,
.triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}<link rel="stylesheet" type="text/css" href="https://tornhq.com/Assets/CSS/style.css" />
<script src="https://tornhq.com/Assets/JS/jquery-3.1.1.js"></script>
<ul class="Fetch-Data-Progress">
<!--Bar Animation -->
<svg style="position:absolute" width="597" height="75" version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="dropshadow" height="200%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
<feOffset dx="0" dy="0"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<circle id="circle_1_top" class="circle top" cx="47"/>
<circle id="circle_1_bottom" class="circle bottom" cx="47"/>
<line id="line_1" class="line" x1="77" x2="185" y1="38" y2="38"/>
<circle id="circle_2_top" class="circle top" cx="216"/>
<circle id="circle_2_bottom" class="circle bottom" cx="216"/>
<line id="line_2" class="line" x1="246" x2="354" y1="38" y2="38"/>
<circle id="circle_3_top" class="circle top" cx="384"/>
<circle id="circle_3_bottom" class="circle bottom" cx="384"/>
<line id="line_3" class="line" x1="413" x2="521" y1="38" y2="38"/>
<circle id="circle_4_top" class="circle top" cx="550"/>
<circle id="circle_4_bottom" class="circle bottom" cx="550"/>
</svg>
<li><i class="fa fa-user-o"></i></li>
<li><i class="fa fa-hand-rock-o"></i></li>
<li><i class="fa fa-building-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<br><br>
<a class="trigger" href="#" id="start">Start</a>我怎么会喜欢我的装载线看起来像
$('#progress').removeClass('running');
$('.trigger').click(function() {
$('#progress').removeClass('running').delay(10).queue(function(next) {
$(this).addClass('running');
next();
});
return false;
});
$('#content').removeClass('fullwidth');
$('.triggerFull').click(function() {
$('#content').removeClass('fullwidth').delay(10).queue(function(next) {
$(this).addClass('fullwidth');
next();
});
return false;
});
$('#loadbar').removeClass('ins');
$('.triggerBar').click(function() {
$('#loadbar').removeClass('ins').delay(10).queue(function(next) {
$(this).addClass('ins');
next();
});
return false;
});html,
body {
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
background: #161616;
}
* {
margin: 0;
padding: 0;
outline: none;
}
a {
text-decoration: none;
color: #00c6ff;
}
/* Full Width Progress Bar */
#content {
width: 100%;
height: 5px;
margin: 50px auto;
background: #000;
}
.fullwidth .expand {
width: 100%;
height: 1px;
margin: 2px 0;
background: #2187e7;
position: absolute;
box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);
-moz-animation: fullexpand 10s ease-out;
-webkit-animation: fullexpand 10s ease-out;
}
@-moz-keyframes fullexpand {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
@-webkit-keyframes fullexpand {
0% {
width: 0px;
}
100% {
width: 100%;
}
}
/* Trigger button for javascript */
.trigger,
.triggerFull,
.triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin: 0 auto;
width: 140px;
}
.trigger:hover,
.triggerFull:hover,
.triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- FULL WIDTH -->
<div id="content">
<span class="expand"></span>
</div>
<a class="triggerFull" href="#">Start/Restart Animation</a>
<!-- END FULL WIDTH -->最佳答案 以下内容适合您.它使得过滤器userSpaceOnUse,正如@Robert Longson在前一个答案的评论中提到的那样.这与动画的线段相关,因为它们的行程不具有高度/宽度.希望能帮助到你！
$('#start').click(function() {
$('#circle_1_top, #circle_1_top_glow').toggleClass('circleAnimationOn');
$('#circle_1_bottom, #circle_1_bottom_glow').toggleClass('circleAnimationOn');
$('#line_1, #line_1_glow').delay(1000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_2_top, #circle_2_top_glow').delay(2000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#circle_2_bottom, #circle_2_bottom_glow').delay(2000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#line_2, #line_2_glow').delay(3000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_3_top, #circle_3_top_glow').delay(4000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#circle_3_bottom, #circle_3_bottom_glow').delay(4000).queue(function() {
$(this).toggleClass('circleAnimationOn');
$(this).dequeue();
});
$('#line_3, #line_3_glow').delay(5000).queue(function() {
$(this).toggleClass('lineAnimationOn');
$(this).dequeue();
});
$('#circle_4_top, #circle_4_top_glow').delay(6000).queue(function() {
$(this).toggleClass('lastCircleAnimationOn');
$(this).dequeue();
});
$('#circle_4_bottom, #circle_4_bottom_glow').delay(6000).queue(function() {
$(this).toggleClass('lastCircleAnimationOn');
$(this).dequeue();
});
}); body {
background: black;
}
.circle {
cy: 37.5;
r: 30;
stroke: white;
stroke-width: 1;
fill: none;
stroke-dasharray: 188.19107055664062px;
stroke-dashoffset: -188.19107055664062px;
transform-origin: center;
}
.glow-circle {
stroke: #2187E7;
stroke-width: 3;
}
.line {
height: 20px;
stroke: white;
stroke-width: 1;
stroke-dasharray: 108px;
stroke-dashoffset: 108px;
}
.glow-line {
stroke: #2187E7;
stroke-width: 3;
fill: none;
}
.top {
transform: scale(-1, 1) rotate(1deg);
}
.bottom {
transform: rotate(181deg);
}
.circleAnimationOn {
stroke-dashoffset: -93px;
transition: stroke-dashoffset 1s linear;
}
.lastCircleAnimationOn {
stroke-dashoffset: -93px;
}
.lineAnimationOn {
stroke-dashoffset: 0px;
transition: stroke-dashoffset 1s linear;
}
a {
text-decoration: none;
color: dimGray;
}
.trigger,
.triggerFull,
.triggerBar {
background: dimGray;
border: 1px solid #111;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin-left: 260px;
width: 140px;
}
.trigger:hover,
.triggerFull:hover,
.triggerBar:hover {
opacity: .9;
} <body>
<script src="https://tornhq.com/Assets/JS/jquery-3.1.1.js"></script>
<ul class="Fetch-Data-Progress">
<svg style="position:absolute; padding-top: 20px; pointer-events: none;" width="597" height="75" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle id="circle_1_top" class="circle top reg" cx="47" />
<circle id="circle_1_top_glow" class="circle top glow-circle" cx="47" style="filter: url(#glow)"/>
<circle id="circle_1_bottom" class="circle bottom reg" cx="47"/>
<circle id="circle_1_bottom_glow" class="circle bottom glow-circle" cx="47" style="filter: url(#glow)"/>
<line id="line_1" class="line" x1="77" x2="185" y1="38" y2="38"/>
<line id="line_1_glow" class="line glow-line" x1="77" x2="185" y1="38" y2="38" style="filter: url(#glow)"/>
<circle id="circle_2_top" class="circle top reg" cx="216"/>
<circle id="circle_2_top_glow" class="circle top glow-circle" cx="216" style="filter: url(#glow)"/>
<circle id="circle_2_bottom" class="circle bottom reg" cx="216"/>
<circle id="circle_2_bottom_glow" class="circle bottom glow-circle" cx="216" style="filter: url(#glow)"/>
<line id="line_2" class="line reg_line" x1="246" x2="354" y1="38" y2="38"/>
<line id="line_2_glow" class="line glow-line" x1="246" x2="354" y1="38" y2="38" style="filter: url(#glow)"/>
<circle id="circle_3_top" class="circle top reg" cx="384"/>
<circle id="circle_3_top_glow" class="circle top glow-circle" cx="384" style="filter: url(#glow)"/>
<circle id="circle_3_bottom" class="circle bottom reg" cx="384"/>
<circle id="circle_3_bottom_glow" class="circle bottom glow-circle" cx="384" style="filter: url(#glow)"/>
<line id="line_3" class="line" x1="413" x2="521" y1="38" y2="38"/>
<line id="line_3_glow" class="line glow-line" x1="413" x2="521" y1="38" y2="38"style="filter: url(#glow)"/>
<circle id="circle_4_top" class="circle top reg" cx="550"/>
<circle id="circle_4_top_glow" class="circle top glow-circle" cx="550" style="filter: url(#glow)"/>
<circle id="circle_4_bottom" class="circle bottom reg" cx="550"/>
<circle id="circle_4_bottom_glow" class="circle bottom glow-circle" cx="550" style="filter: url(#glow)"/>
<g style="overflow:hidden; text-anchor: middle; font-size:50; font-family: Impact, sans-serif">
<defs>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="4 4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="glow"/>
<feMergeNode in="glow"/>
</feMerge>
</filter>
</defs>
</g>
</svg>
<li><i class="fa fa-user-o"></i></li>
<li><i class="fa fa-hand-rock-o"></i></li>
<li><i class="fa fa-building-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<br><br>
<a class="trigger" href="#" id="start">start</a>
</body>