CSS spinning loader

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

Spin, spin, spin!

Thumbnail
This awesome code was written by Thomasvd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Thomasvd ©
  • HTML
  • CSS
  • JavaScript
    <i class="loader demo"></i>

/*Downloaded from https://www.codeseek.co/Thomasvd/css-spinning-loader-kaKHI */
    html {
	font: 100%/1.5 Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	min-height: 100%;
	text-align: center;
	position: relative;
}

.loader {
	display: block;
 	width: 10px;
 	height: 10px;
 	position: relative;
 	border: 40px solid;
  border-right-color: transparent;
 	border-radius: 50%;
 	animation: spin 1s infinite linear;
  color: #555; /* Just set the color once - here! The whole arrow will get it. */
  background-color: transparent;
 }
 
 	.loader:after {
 		content:'';
 		width: 0;
 		height: 0;
 		display: block;
 		position: absolute;
 		top: -50%;
 		right: -50%;
 		border: 4px solid transparent;
 		border-left-color: inherit;
 	}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Demo styles */

.demo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -8px;
}


/*Downloaded from https://www.codeseek.co/Thomasvd/css-spinning-loader-kaKHI */
    

Comments