<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="preloader"> <div class="loader loader-inner-1"> <div class="loader loader-inner-2"> <div class="loader loader-inner-3"> </div> </div> </div> </div>

.preloader{ height: 100%; width: 100%; padding: 20px 0 20px; display: flex; flex-flow: column wrap; justify-content: center; align-content: center; align-items: center; perspective: 700; } .loader{ text-align: center; margin: 5px; border-radius: 50%; border: 4px solid #363636; display: flex; flex-flow: column wrap; justify-content: center; align-content: center; align-items: center; transform-style: preserve-3d; position: relative; } .loader-inner-1{ animation-delay: 0.2s; animation: change_first_circle 2s ease-in-out infinite; } .loader-inner-2{ animation-delay: 0.2s; animation: change_second_circle 2s ease-in-out infinite; border: 4px solid #F1710C; } .loader-inner-3{ animation-delay: 0.2s; width: 100px; height: 100px; animation: change_last_circle 3s linear infinite; } @keyframes change_first_circle { 50%{ transform: rotateX(360deg) scale(0.8); } } @keyframes change_second_circle { 50%{ transform: rotateY(360deg) scale(0.8); } } @keyframes change_last_circle { 50%{ transform: rotateX(360deg) scale(0.8); } }