All geek questions in one place

Styling Custom SVG Loader

What am i trying to achieve

I created a custom SVG downloader, but being new to SVG, I'm not very good at their style. I am trying to get my new bootloader as shown in the first snippet below to match the look of my other bootloader seen in the second snippet.

Which my custom SVG loader 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>
Run codeHide result

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 -->
Run codeHide result
+4
source share
1 answer

. 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>
Hide result
+2

Source: https://habr.com/ru/post/1673668/

More articles:


All Articles