<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="circle"> </div>

body { margin:0; padding:0; background:#000; } .circle { position:absolute; top:calc(50% - 54px); left:calc(50% - 54px); transform:translate(-50%,-50%); width:100px; height:100px; border:4px solid transparent; border-bottom:4px solid #fff958; border-top:4px solid #b858ff; border-radius:50%; animation:animate 2s linear infinite; } .circle:before { content:''; position:absolute; top:10px; left:10px; bottom:10px; right:10px; border:4px solid transparent; border-bottom:4px solid #e74c3c; border-top:4px solid #3ce7d8; border-radius:50%; animation:animate 2s linear infinite; } .circle:after { content:''; position:absolute; top:24px; left:24px; bottom:24px; right:24px; border:4px solid transparent; border-bottom:4px solid #39ff8d; border-top:4px solid #ff67ad; border-radius:50%; animation:animate 4s linear infinite; } @keyframes animate { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }