<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="loader"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"> <div class="loader-inner"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.loader{ overflow: hidden; } .loader .loader-inner{ width: 260px; height: 260px; background: #406bd4; border-radius: 50%; padding: 15px; margin: 64px auto; box-sizing: border-box; position: relative; animation: loading-1 10s linear forwards infinite; } .loader .loader-inner:before{ content: ""; background: #0099ff; border-radius: 0 100% 0 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .loader .loader-inner > .loader-inner{ width: 100%; height: 100%; margin: 0; } @keyframes loading-1{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }