<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 ----------> <h4 class="text-center">Create a beautiful loader in Html and css3 only</h4> <div class="cssload-loader-inner"> <div class="cssload-cssload-loader-line-wrap-wrap"> <div class="cssload-loader-line-wrap"></div> </div> <div class="cssload-cssload-loader-line-wrap-wrap"> <div class="cssload-loader-line-wrap"></div> </div> <div class="cssload-cssload-loader-line-wrap-wrap"> <div class="cssload-loader-line-wrap"></div> </div> <div class="cssload-cssload-loader-line-wrap-wrap"> <div class="cssload-loader-line-wrap"></div> </div> <div class="cssload-cssload-loader-line-wrap-wrap"> <div class="cssload-loader-line-wrap"></div> </div> </div>

.cssload-loader-inner { bottom: 0; height: 195px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 325px; } .cssload-cssload-loader-line-wrap-wrap { animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite; -o-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite; -ms-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite; -webkit-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite; -moz-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 163px; left: 0; overflow: hidden; position: absolute; top: 0; transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; width: 325px; } .cssload-loader-line-wrap { border: 13px solid transparent; border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 325px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 325px; } .cssload-cssload-loader-line-wrap-wrap:nth-child(1) { animation-delay: -57.5ms; -o-animation-delay: -57.5ms; -ms-animation-delay: -57.5ms; -webkit-animation-delay: -57.5ms; -moz-animation-delay: -57.5ms; } .cssload-cssload-loader-line-wrap-wrap:nth-child(2) { animation-delay: -115ms; -o-animation-delay: -115ms; -ms-animation-delay: -115ms; -webkit-animation-delay: -115ms; -moz-animation-delay: -115ms; } .cssload-cssload-loader-line-wrap-wrap:nth-child(3) { animation-delay: -172.5ms; -o-animation-delay: -172.5ms; -ms-animation-delay: -172.5ms; -webkit-animation-delay: -172.5ms; -moz-animation-delay: -172.5ms; } .cssload-cssload-loader-line-wrap-wrap:nth-child(4) { animation-delay: -230ms; -o-animation-delay: -230ms; -ms-animation-delay: -230ms; -webkit-animation-delay: -230ms; -moz-animation-delay: -230ms; } .cssload-cssload-loader-line-wrap-wrap:nth-child(5) { animation-delay: -287.5ms; -o-animation-delay: -287.5ms; -ms-animation-delay: -287.5ms; -webkit-animation-delay: -287.5ms; -moz-animation-delay: -287.5ms; } .cssload-cssload-loader-line-wrap-wrap:nth-child(1) .cssload-loader-line-wrap { border-color: rgb(234,71,71); height: 293px; width: 293px; top: 23px; } .cssload-cssload-loader-line-wrap-wrap:nth-child(2) .cssload-loader-line-wrap { border-color: rgb(234,234,71); height: 247px; width: 247px; top: 46px; } .cssload-cssload-loader-line-wrap-wrap:nth-child(3) .cssload-loader-line-wrap { border-color: rgb(71,234,71); height: 202px; width: 202px; top: 68px; } .cssload-cssload-loader-line-wrap-wrap:nth-child(4) .cssload-loader-line-wrap { border-color: rgb(71,234,234); height: 156px; width: 156px; top: 91px; } .cssload-cssload-loader-line-wrap-wrap:nth-child(5) .cssload-loader-line-wrap { border-color: rgb(71,71,234); height: 111px; width: 111px; top: 114px; } @keyframes cssload-spin { 0%, 15% { transform: rotate(0); transform: rotate(0); } 100% { transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes cssload-spin { 0%, 15% { -o-transform: rotate(0); transform: rotate(0); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes cssload-spin { 0%, 15% { -ms-transform: rotate(0); transform: rotate(0); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes cssload-spin { 0%, 15% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes cssload-spin { 0%, 15% { -moz-transform: rotate(0); transform: rotate(0); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } }