#preloader { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 768px; min-width: 1024px; } #loader { width: 75px; height: 75px; border-radius: 50%; border: 2px solid transparent; border-top-color: #F5841F; -webkit-animation: spin 2s ease-out infinite; animation: spin 2s ease-out infinite; } #loader:before { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 50%; border: 2px solid transparent; border-top-color: #F5841F; -webkit-animation: spin 3s ease-out infinite; animation: spin 3s ease-out infinite; } #loader:after { content: ""; position: absolute; top: 25px; left: 25px; right: 25px; bottom: 25px; border-radius: 50%; border: 2px solid transparent; border-top-color: #F5841F; -webkit-animation: spin 1.5s ease-out infinite; animation: spin 1.5s ease-out infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }