<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="CoE-fading-circle"> <div class="CoE-circle1 CoE-circle"></div> <div class="CoE-circle2 CoE-circle"></div> <div class="CoE-circle3 CoE-circle"></div> <div class="CoE-circle4 CoE-circle"></div> <div class="CoE-circle5 CoE-circle"></div> <div class="CoE-circle6 CoE-circle"></div> <div class="CoE-circle7 CoE-circle"></div> <div class="CoE-circle8 CoE-circle"></div> <div class="CoE-circle9 CoE-circle"></div> <div class="CoE-circle10 CoE-circle"></div> <div class="CoE-circle11 CoE-circle"></div> <div class="CoE-circle12 CoE-circle"></div> </div>

.CoE-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative } .CoE-fading-circle .CoE-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .CoE-fading-circle .CoE-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #4bcd3e; border-radius: 100%; -webkit-animation: CoE-circleFadeDelay 1.2s infinite ease-in-out both; animation: CoE-circleFadeDelay 1.2s infinite ease-in-out both } .CoE-fading-circle .CoE-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg) } .CoE-fading-circle .CoE-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg) } .CoE-fading-circle .CoE-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) } .CoE-fading-circle .CoE-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg) } .CoE-fading-circle .CoE-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg) } .CoE-fading-circle .CoE-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .CoE-fading-circle .CoE-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg) } .CoE-fading-circle .CoE-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg) } .CoE-fading-circle .CoE-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg) } .CoE-fading-circle .CoE-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg) } .CoE-fading-circle .CoE-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg) } .CoE-fading-circle .CoE-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s } .CoE-fading-circle .CoE-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s } .CoE-fading-circle .CoE-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s } .CoE-fading-circle .CoE-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s } .CoE-fading-circle .CoE-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s } .CoE-fading-circle .CoE-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s } .CoE-fading-circle .CoE-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s } .CoE-fading-circle .CoE-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s } .CoE-fading-circle .CoE-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s } .CoE-fading-circle .CoE-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s } .CoE-fading-circle .CoE-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s } @-webkit-keyframes CoE-circleFadeDelay { 0%, 39%, 100% { opacity: 0 } 40% { opacity: 1 } } @keyframes CoE-circleFadeDelay { 0%, 39%, 100% { opacity: 0 } 40% { opacity: 1 } }