CodePen

HTML

            
              <div class="wrapper">

<i class="throbber"></i>

</div>
            
          
!

CSS

            
              /* Google Chrome Throbber [CSS] */


html {
  background:white;
  background-repeat:no-repeat;
  background-size:cover;
	min-height:100%;
}

.throbber {
	display: block;
 	width: 13px;
 	height: 13px;
	margin:-10px;
	padding:0;
	position:absolute;
	top:50%;
	left:50%;
 	border: 3px solid;
 	border-top-color: transparent;
 	border-left-color: transparent;
 	border-radius: 50%;
	color:#397CE9;
	background-color: transparent;
	animation: load 0.9s linear infinite;
 }

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

.wrapper {
	line-height:40px;
	width:400px;
	height:300px;
	top:50%;
	left:50%;
	margin:-150px -200px;
	display:block;
	position:absolute;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................