SM Loading Animation

In this example below you will see how to do a SM Loading Animation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by haibnu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright haibnu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SM Loading Animation</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background-color: #3e3e3e;
}

svg {
  position: relative;
  top: 10px;
  left: 10px;
}

.path, .path2, .path3, .path4, .path5 {
  fill: none;
  stroke-width: 2;
  opacity: 1;
  position: relative;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.path {
  animation-fill-mode: forwards;
}

.path2 {
  animation-delay: 2s;
}

.path3 {
  animation-delay: 3s;
}

.path4 {
  animation-delay: 4s;
}

.path5 {
  animation-delay: 5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <svg width="455" height="255" viewBox="0 0 455 255" xmlns="http://www.w3.org/2000/svg">
	<rect x="1" y="1" rx="3" ry="3" width="55" height="55" class="path" stroke="white" />
	<rect x="1" y="1" rx="3" ry="3" width="55" height="55" class="path2" stroke="#38b44a" />
	<rect x="1" y="1" rx="3" ry="3" width="55" height="55" class="path3" stroke="#fec40d" />
	<rect x="1" y="1" rx="3" ry="3" width="55" height="55" class="path4" stroke="#e53434" />
	<rect x="1" y="1" rx="3" ry="3" width="55" height="55" class="path5" stroke="#3db3db" />
	
	<!-- <rect x="150" y="1" rx="3" ry="3" width="55" height="55" class="path" stroke="white" />
	<rect x="210" y="1" rx="3" ry="3" width="55" height="55" class="path2" stroke="#38b44a" />
	<rect x="270" y="1" rx="3" ry="3" width="55" height="55" class="path3" stroke="#fec40d" />
	<rect x="330" y="1" rx="3" ry="3" width="55" height="55" class="path4" stroke="#e53434" />
	<rect x="390" y="1" rx="3" ry="3" width="55" height="55" class="path5" stroke="#3db3db" /> -->
	
	<g transform="translate(10,20)">
		<path d="M32.347,1.2392 C33.0096667,1.5032 33.611,1.9672 34.1503333,2.62986667 C34.5863333,3.16986667 34.8796667,3.83186667 35.0316667,4.61786667 C35.1256667,5.1392 35.1723333,5.8992 35.1723333,6.90453333 L35.145,16.6598667 L30.9983333,16.6598667 L30.9983333,6.80453333 C30.9983333,6.21786667 30.903,5.7352 30.7143333,5.35653333 C30.355,4.63653333 29.6923333,4.2772 28.727,4.2772 C27.609,4.2772 26.8376667,4.74186667 26.4123333,5.66986667 C26.1943333,6.1612 26.085,6.75253333 26.085,7.4452 L26.085,16.6598667 L22.011,16.6598667 L22.011,7.4452 C22.011,6.52653333 21.9163333,5.85853333 21.727,5.4432 C21.3863333,4.69386667 20.7183333,4.31986667 19.7243333,4.31986667 C18.5696667,4.31986667 17.7936667,4.69386667 17.3963333,5.4432 C17.1776667,5.86786667 17.0696667,6.5012 17.0696667,7.34453333 L17.0696667,16.6598667 L12.9656667,16.6598667 L12.9656667,1.21053333 L16.899,1.21053333 L16.899,3.46853333 C17.4003333,2.66386667 17.873,2.09053333 18.3183333,1.75053333 C19.1036667,1.14386667 20.1216667,0.840533333 21.3716667,0.840533333 C22.555,0.840533333 23.511,1.10053333 24.2403333,1.62186667 C24.8263333,2.10586667 25.2716667,2.7252 25.575,3.48186667 C26.105,2.5732 26.7636667,1.9072 27.549,1.47986667 C28.3796667,1.05453333 29.309,0.840533333 30.3303333,0.840533333 C31.0123333,0.840533333 31.6856667,0.974533333 32.347,1.2392" fill="white"></path>
	<path d="M4.2246,11.7183333 C4.3106,12.437 4.4966,12.9483333 4.7806,13.2523333 C5.28593333,13.791 6.2166,14.0603333 7.57726667,14.0603333 C8.37593333,14.0603333 9.0126,13.9416667 9.48393333,13.7063333 C9.95393333,13.4683333 10.1879333,13.115 10.1879333,12.6416667 C10.1879333,12.187 9.99793333,11.8423333 9.6206,11.6036667 C9.2386,11.367 7.82993333,10.9603333 5.38593333,10.3836667 C3.62793333,9.94766667 2.38726667,9.40366667 1.6686,8.75033333 C0.949933333,8.10566667 0.5906,7.179 0.5906,5.96633333 C0.5906,4.53766667 1.1506,3.30966667 2.27393333,2.28366667 C3.40193333,1.255 4.9826,0.741666667 7.0226,0.741666667 C8.95793333,0.741666667 10.5346,1.127 11.7519333,1.899 C12.9719333,2.67166667 13.6726,4.00366667 13.8506,5.89566667 L9.80526667,5.89566667 C9.74793333,5.37633333 9.60193333,4.963 9.36393333,4.661 C8.91726667,4.11166667 8.15793333,3.837 7.0866,3.837 C6.20393333,3.837 5.57326667,3.975 5.19993333,4.24966667 C4.82326667,4.52366667 4.63593333,4.84633333 4.63593333,5.21433333 C4.63593333,5.67766667 4.83526667,6.01433333 5.23526667,6.22233333 C5.63326667,6.43966667 7.03993333,6.815 9.45926667,7.34433333 C11.0719333,7.723 12.2806,8.29633333 13.0866,9.063 C13.8806,9.83966667 14.2779333,10.809 14.2779333,11.9736667 C14.2779333,13.5076667 13.7052667,14.759 12.5646,15.7296667 C11.4186,16.699 9.65326667,17.1843333 7.26393333,17.1843333 C4.82593333,17.1843333 3.02526667,16.6716667 1.8626,15.6443333 C0.701266667,14.6176667 0.121933333,13.3083333 0.121933333,11.7183333 L4.2246,11.7183333 Z" fill="white"></path>
	</g>
</svg>


<!-- <svg width="90px" height="90px" viewBox="0 0 90 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g class="path" id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
			<g transform="translate(-614.000000, -360.000000)" stroke="#979797" id="Rectangle-4" stroke-width="2">
					<rect x="615" y="361" width="88" height="88" rx="8"></rect>
			</g>
    </g>
		<g class="path2" id="Dashboard" stroke="red" stroke-width="1" fill="none" fill-rule="evenodd">
			<g transform="translate(-614.000000, -360.000000)" stroke="#979797" id="Rectangle-4" stroke-width="2">
					<rect x="615" y="361" width="88" height="88" rx="8"></rect>
			</g>
    </g>
</svg> 

<path class="path" d="M49.330508,55 L5.67049668,55 C2.54991506,55 0,52.4370239 0,49.3425643 L0,5.65542626 C0,2.56398078 2.54991506,0 5.67049668,0 L49.330508,0 C52.4500849,0 55,2.56398078 55,5.65542626 L55,49.3425643 C55,52.4370239 52.4500849,55 49.330508,55 Z" stroke="black" stroke-width="2" fill="transparent"/>
	<path class="path2" d="M 5 50 Q 0 0 55 5 L 200 5 Q 250 0 250 50 L 250 200 Q 250 250 200 250 L 55 250 Q 5 250 5 200 Z" stroke="#E16C6C" stroke-width="3" fill="transparent"/>
	<path class="path3" d="M 5 50 Q 0 0 55 5 L 200 5 Q 250 0 250 50 L 250 200 Q 250 250 200 250 L 55 250 Q 5 250 5 200 Z" stroke="#38B44A" stroke-width="3" fill="transparent"/>
-->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/haibnu/sm-loading-animation-jaBOeW */
body {
  background-color: #3e3e3e;
}

svg {
  position: relative;
  top: 10px;
  left: 10px;
}

.path, .path2, .path3, .path4, .path5 {
  fill: none;
  stroke-width: 2;
  opacity: 1;
  position: relative;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.path {
  animation-fill-mode: forwards;
}

.path2 {
  animation-delay: 2s;
}

.path3 {
  animation-delay: 3s;
}

.path4 {
  animation-delay: 4s;
}

.path5 {
  animation-delay: 5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Comments