<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="m-5 p-5"> <div class="loader"> <span></span> <span></span> <span></span> <span></span> </div> </div>

.loader { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%) rotate(0deg) translate3d(0, 0, 0); animation: loader 1.4s infinite ease-in-out; } .loader span { position: absolute; display: block; width: 40px; height: 40px; background-color: #12CB56; animation: loaderBlock 1.4s infinite ease-in-out both; } .loader span:nth-child(1) { top: 0; left: 0; } .loader span:nth-child(2) { top: 0; right: 0; animation: loaderBlockInverse 1.4s infinite ease-in-out both; } .loader span:nth-child(3) { bottom: 0; left: 0; animation: loaderBlockInverse 1.4s infinite ease-in-out both; } .loader span:nth-child(4) { bottom: 0; right: 0; } body { background-color: #2A3239; } @keyframes loader { 0%, 10%, 100% { width: 80px; height: 80px; } 65% { width: 130px; height: 130px; } } @keyframes loaderBlock { 0%, 30% { transform: rotate(0); } 55% { background-color: #f37272; } 100% { transform: rotate(360deg); } } @keyframes loaderBlockInverse { 0%, 20% { transform: rotate(0); } 55% { background-color: #f37272; } 100% { transform: rotate(-360deg); } }