"Preloader : Demo5"
Bootstrap 3.0.0 Snippet by napsterbd

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div></div> <div></div> <div></div> <div></div> </div> </div> </div> </div>
.loader{ position: relative; width: 8em; height: 8em; margin: 20px auto; overflow: hidden; background: rgba(0, 0, 0, 0.35); } .loader > div { position: absolute; width: 8em; height: 8em; animation: alpha 2.25s linear infinite forwards; background: rgba(231, 76, 60, 0.75); } .loader > div:nth-child(1) { top: -50%; left: -50%; } .loader > div:nth-child(2) { top: -50%; right: -50%; } .loader > div:nth-child(3) { bottom: -50%; right: -50%; } .loader > div:nth-child(4) { bottom: -50%; left: -50%; } @keyframes alpha { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); background: rgba(231, 76, 60, 0.75); } 25% { background: rgba(230, 126, 34, 0.75); } 50% { border-radius: 50%; background: rgba(142, 68, 173, 0.75); } 75% { background: rgba(41, 128, 185, 0.75); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: rgba(231, 76, 60, 0.75); } }

Related: See More


Questions / Comments: