<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 text-center"> <div class="col-md-4 col-md-offset-4 spin-container"> <div class="circle"> </div> </div> </div> </div>

.spin-container{ background-color: #000; margin-top: 5em; height: 400px; } .circle{ width: 100px; height: 100px; border: 7px dashed rgba(255, 255, 255, 0.2); border-radius: 50%; display: block; position: absolute; margin-left: 30%; margin-top: 30%; border-bottom-color: #fff; border-left-color: #fff; -webkit-animation: clockwise 0.75s steps(8, end) infinite; animation: clockwise 0.75s steps(8, end) infinite; } @-webkit-keyframes clockwise { to {transform: rotate(360deg) translatez(0);} } @keyframes clockwise { to {transform: rotate(360deg) translatez(0);} } .circle:before{ content: ""; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; border: 2px solid #8a8484; border-radius: 50%; box-shadow: inset 1px 3px 8px #b7b3b3, inset -1px -4px 8px #8a8484, 0px 2px 1px black; } .circle:after{ content: ""; position: absolute; top: 18px; right: 20px; bottom: 20px; left: 18px; height: 50px; width: 50px; background-color: #736d6d; border-radius: 50%; box-shadow: inset 1px 6px 12px #b7b3b3, inset -1px -10px 5px #8a8484, 0px 2px 1px black; }