FADE IN AND OUT SPINNER
Run 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .preloader {
	  border : 10px solid blue;
	  border-radius: 50%;
	  width: 50px;
	  height: 50px;
	  border-top: 10px solid gray;
	  -webkit-animation: preloader 1s ease-in-out infinite;
      animation: preloader 1s ease-in-out infinite;
}
    }
     @-webkit-keyframes preloader {
	  100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes preloader {
	  100% { transform: rotate(360deg); }
    }
</style>

</head>
<body>
    <h2>Preloader </h2>
	<div class="preloader">
	   
	</div>

</body>
</html>