<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 class="loader-inner box1"></div> <div class="loader-inner box2"></div> <div class="loader-inner box3"></div> </div> </div> </div> </div>

.loader { position: relative; width: 100px; height: 100px; border-radius: 50%; margin: 20px auto; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -webkit-perspective: 780px; perspective: 780px; } .loader-inner { position: absolute; width: 100%; height: 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; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .loader-inner.box1{ left: 0%; top: 0%; animation: cssload-rotate-one 1.15s linear infinite; -o-animation: cssload-rotate-one 1.15s linear infinite; -ms-animation: cssload-rotate-one 1.15s linear infinite; -webkit-animation: cssload-rotate-one 1.15s linear infinite; -moz-animation: cssload-rotate-one 1.15s linear infinite; border-bottom: 3px solid #5C5EDC; } .loader-inner.box2{ right: 0%; top: 0%; animation: cssload-rotate-two 1.15s linear infinite; -o-animation: cssload-rotate-two 1.15s linear infinite; -ms-animation: cssload-rotate-two 1.15s linear infinite; -webkit-animation: cssload-rotate-two 1.15s linear infinite; -moz-animation: cssload-rotate-two 1.15s linear infinite; border-right: 3px solid rgba(76, 70, 101, 0.99); } .loader-inner.box3{ right: 0%; bottom: 0%; animation: cssload-rotate-three 1.15s linear infinite; -o-animation: cssload-rotate-three 1.15s linear infinite; -ms-animation: cssload-rotate-three 1.15s linear infinite; -webkit-animation: cssload-rotate-three 1.15s linear infinite; -moz-animation: cssload-rotate-three 1.15s linear infinite; border-top: 3px solid #e9908a; } @keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @-webkit-keyframes cssload-rotate-one { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @-webkit-keyframes cssload-rotate-two { 0% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } @-webkit-keyframes cssload-rotate-three { 0% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }