.demo{ background: #4b4673; } .loader{ width: 150px; height: 150px; margin: 30px auto; position: relative; } .loading{ position: absolute; border-top: 2px solid #ed8a87; border-bottom: 2px solid transparent; border-left: 2px solid #ed8a87; border-right: 2px solid transparent; border-radius: 50%; -webkit-animation: loading-1 2s infinite; animation: loading-1 2s infinite; } .loader .loader-inner-1{ width: 50px; height: 50px; top: 50px; left: 50px; } .loader .loader-inner-2{ width: 70px; height: 70px; top: 40px; left: 40px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .loader .loader-inner-3{ width: 90px; height: 90px; top: 30px; left: 30px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .loader .loader-inner-4{ width: 110px; height: 110px; top: 20px; left: 20px; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes loading-1{ 50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } } @keyframes loading-1{ 50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } }