animatedLoader

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

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

<head>
  <meta charset="UTF-8">
  <title>animatedLoader</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html >
  <head>
    <meta charset="UTF-8">
    <title>e sign</title>
    <link rel="stylesheet" href="css/esign.css">

  </head>
	
	  <style>
	  	.use_shadow {
	  			filter:url('#shadow');
			
				}	
	  </style>

  <body>
	<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="200" width="200" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 200 200">
		<defs>
			<linearGradient id="linearGradient4337" y2="53.9452" gradientUnits="userSpaceOnUse" x2="38.4776" gradientTransform="translate(29.0205,40.2093)" y1="68.9758" x1="53.83">
				<stop stop-color="#fff" offset="0"/>
				<stop stop-color="#fff" stop-opacity="0" offset="1"/>
			</linearGradient>
		</defs>
		 <g id="esign">
		  <path fill="#5fc513" d="m158.55 62.984c0.1125 2.9575-0.675 5.28875-2.35 7.01-1.6875 1.74-4.0125 2.57125-6.975 2.43625-5.4125-0.24-10.9875-0.48-16.7625-0.7325-5.962-0.2588-12.112-0.5388-18.474-0.8138-3.7-0.15875-6.725-1.335-9.0875-3.55625-2.3875-2.23-3.6125-5.09375-3.65-8.5475-0.05-3.44875 1.1125-6.11625 3.425-7.97875 2.275-1.8425 5.25-2.57125 8.9125-2.1975 6.3125 0.64875 12.4125 1.27875 18.325 1.88625 5.7125 0.5875 11.25 1.1625 16.625 1.715 2.95 0.305 5.325 1.46125 7.1375 3.4375 1.8125 1.95875 2.7625 4.405 2.875 7.34125"/>
		  <path fill="#656565" d="m101.2 84.8202 13.2625 0.24625c7.3 0.1375 14.3375 0.26125 21.15 0.38875 4.4625 0.085 8.8 0.17125 13.075 0.25125 2.925 0.05375 5.3 1.1875 7.15 3.36625 1.85 2.17 2.85 5.01375 3.0375 8.52375 0.1875 3.54125-0.5125 6.425-2.1375 8.66-1.6375 2.255-3.925 3.4725-6.875 3.6-4.2875 0.18-8.675 0.37375-13.15 0.57125-6.8625 0.3-13.9625 0.6125-21.3125 0.93375l-13.4125 0.5925-0.7875-27.1337"/>
		  <path fill="#313131" d="m170.025 132.399c0.2 3.55375-0.4875 6.52625-2.0375 8.935-1.5625 2.41875-3.7375 3.8275-6.5625 4.225-11.7625 1.66-24.275 3.4325-37.6 5.31625-14.2625 2.015-29.5625 4.17875-45.9875 6.4975-4.3 0.6075-7.8625-0.275-10.6125-2.715-2.775-2.4525-4.2125-6.0275-4.275-10.6362-0.075-5.19875-0.15-10.4-0.225-15.5788-0.075-4.915-0.15-9.8325-0.2125-14.7238-5.3875 0.24125-10.875 0.47-16.4875 0.7275-8.9375 0.4075-16.475-6.445-16.4875-15.2-0.0125-8.65375 7.4-15.5862 16.2375-15.4338 5.55 0.095 10.9625 0.195 16.2875 0.29125-0.025-2.00375-0.05-4.03-0.0875-6.0425-0.1-7.66625-0.225-15.2825-0.3375-22.84-0.112-7.8524 6.238-13.5349 13.863-12.6974 7.3875 0.80875 13.4 7.4675 13.6 14.8687 0.1875 7.13125 0.3625 14.31 0.55 21.5212l0.025 1.29625 0.0125 0.25 0.0125 0.29625v0.21875l0.0625 2.63625 0.7375 28.85 0.025 0.8925 0.0125 0.19375v0.035l0.0625 2.4075 0.0875 3.52875c0.1125 4.73375 2.3875 6.94 6.7375 6.6075 11.85-0.905 23.1-1.75875 33.7625-2.56875 10.125-0.76875 19.7625-1.49875 28.9625-2.1925 2.7875-0.21125 5.0875 0.69625 6.8875 2.725 1.7875 2.01625 2.7875 4.77875 2.9875 8.30875"/>
		  <path opacity=".5" d="m106.798 61.8001 4.95215 3.20433 10.0985 0.582606 12.6231-12.9144-16.313-1.45652zm-1.45651 32.5288-0.19421 8.73909 18.8376-16.1188-9.9043-0.388404zm-39.1955 30.3616 19.4202-17.8666 0.3884-53.0171s-3.03344-6.57598-6.02026-8.15648c-2.97749-1.57556-6.99124-1.68947-10.0985-0.3884-2.74735 1.15036-6.02026 6.60286-6.02026 6.60286l0.1942 28.5477-0.3884 4.85505-22.9158 0.582606s-6.86449 5.25715-8.15648 9.12749c-0.966866 2.89638-0.572004 6.38805 0.776808 9.12749 1.35607 2.75418 6.79707 6.21446 6.79707 6.21446l25.4405-1.16521z" fill-rule="evenodd" fill="url(#linearGradient4337)"/>
		 </g>
		 <g id="eoutline" stroke="#000" fill="none">
		  <path id="greenshape" d="m158.752 62.984c0.1125 2.9575-0.675 5.28875-2.35 7.01-1.6875 1.74-4.0125 2.57125-6.975 2.43625-5.4125-0.24-10.9875-0.48-16.7625-0.7325-5.9625-0.25875-12.1125-0.53875-18.475-0.81375-3.7-0.15875-6.725-1.335-9.0875-3.55625-2.3875-2.23-3.6125-5.09375-3.65-8.5475-0.05-3.44875 1.1125-6.11625 3.425-7.97875 2.275-1.8425 5.25-2.57125 8.9125-2.1975 6.3125 0.64875 12.4125 1.27875 18.325 1.88625 5.7125 0.5875 11.25 1.1625 16.625 1.715 2.95 0.305 5.325 1.46125 7.1375 3.4375 1.8125 1.95875 2.7625 4.405 2.875 7.34125"/>
		  <path id="grayshape" d="m114.664 85.0665c7.3 0.1375 14.3375 0.26125 21.15 0.38875 4.4625 0.085 8.8 0.17125 13.075 0.25125 2.925 0.0538 5.3 1.1875 7.15 3.36625 1.85 2.17 2.85 5.01375 3.0375 8.52375 0.1875 3.54125-0.5125 6.425-2.1375 8.66-1.6375 2.255-3.925 3.4725-6.875 3.6-4.2875 0.18-8.675 0.37375-13.15 0.57125-6.8625 0.3-13.9625 0.6125-21.3125 0.93375l-13.4125 0.5925-0.7875-27.1337z"/>
		  <path id="bigrayshape" d="m170.227 132.399c0.2 3.55375-0.4875 6.52625-2.0375 8.935-1.5625 2.41875-3.7375 3.8275-6.5625 4.225-11.7625 1.66-24.275 3.4325-37.6 5.31625-14.2625 2.015-29.5625 4.17875-45.9875 6.4975-4.3 0.6075-7.8625-0.275-10.6125-2.715-2.775-2.4525-4.2125-6.0275-4.275-10.6362-0.075-5.19875-0.15-10.4-0.225-15.5788-0.075-4.915-0.15-9.8325-0.2125-14.7238-5.3875 0.24125-10.875 0.47-16.4875 0.7275-8.9375 0.4075-16.475-6.445-16.4875-15.2-0.0125-8.65375 7.4-15.5862 16.2375-15.4338 5.55 0.095 10.9625 0.195 16.2875 0.29125-0.025-2.00375-0.05-4.03-0.0875-6.0425-0.1-7.66625-0.225-15.2825-0.3375-22.84-0.1125-7.8525 6.2375-13.535 13.8625-12.6975 7.3875 0.80875 13.4 7.4675 13.6 14.8687 0.1875 7.13125 0.3625 14.31 0.55 21.5212l0.025 1.29625 0.0125 0.25 0.0125 0.29625v0.21875l0.0625 2.63625 0.7375 28.85 0.025 0.8925 0.0125 0.19375v0.035l0.0625 2.4075 0.0875 3.52875c0.1125 4.73375 2.3875 6.94 6.7375 6.6075 11.85-0.905 23.1-1.75875 33.7625-2.56875 10.125-0.76875 19.7625-1.49875 28.9625-2.1925 2.7875-0.21125 5.0875 0.69625 6.8875 2.725 1.7875 2.01625 2.7875 4.77875 2.9875 8.30875"/>
		 </g>
	</svg>
 
  </body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/navupawar/animatedloader-kkkwaw */
svg{
	position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/*
.use_shadow{filter:url('#shadow');}
*/
#esign {
	opacity:0;
	animation-name: logofill;
	animation-duration:4s;
	
	animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;

   -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;
   
}

#eoutline path {
	stroke-width:1;
	stroke-opacity:1.0;
	stroke: #000;
	stroke-dasharray:475;
	stroke-dashoffset:475;
	animation-name: logo;
	animation-duration: 4s;
     -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;
  
}

@keyframes logo {
	0% {
		stroke-dashoffset:475;
		}

	5% {
		stroke-dashoffset:475;
		}
	50% {
		stroke-dashoffset:0;
		}
	60% {
		stroke-dashoffset:0;
		stroke-opacity: 1;
		}	
	100% {
		stroke-dashoffset:0;
		stroke-opacity: 0;
		}
	}

@keyframes logofill {

	60% {
		opacity: 0.0;
		}	
	100% {
		opacity: 1.0;
		}
	}



Comments