Search code examples
csssvgsvg-animate

Styling Custom SVG Loader

What I Am Trying To Achieve

I've created a custom SVG loader, however being new to SVG's I'm not too familiar with styling them too well. I am trying to get my new loader, as seen below in the first snippet, to match the looks of my other loader seen in my second snippet.

What My Custom SVG Loader Currently looks Like

$('#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>

How I Would Like My Loader Line To Look like

$('#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 -->

Solution

  • The following should work for you. It makes the filter userSpaceOnUse, as @Robert Longson mentioned in comment on a previous answer. This is relevant for the line segments of the animation, as they do not have heights/widths other than their stroke. Hope it helps!

          $('#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>