Rotating loader animation

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

Thumbnail
This awesome code was written by nikches, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nikches ©
  • HTML
  • CSS
  • JavaScript
    
	<svg class="circular" viewBox="0 0 150 150">
		<circle class="path" cx="50" cy="50" r="20" fill="none" stroke="#fff" stroke-width="5" stroke-miterlimit="10"/>
	</svg>
  

/*Downloaded from https://www.codeseek.co/nikches/rotating-loader-animation-rLpNNN */
    
body {
  background-color: #00A8FF;
}



.showbox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5%;
}


.loader {
  position: relative;
  margin: 0px auto;
  width: 100%;
  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}



.path {
  transform-origin: center center;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: dash 3s ease-in-out infinite forwards, rotate 3s ease-in-out infinite forwards;
}

@keyframes rotate {
  100% {
    transform: rotate(1800deg);
  }
}

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



/*Downloaded from https://www.codeseek.co/nikches/rotating-loader-animation-rLpNNN */
    

Comments