.loader{ width: 120px; height: 120px; margin: 30px auto 0; position: relative; animation: rotate 3s ease-out infinite; } .loader div{ background-color: #df0abc; width: 16px; height: 16px; border-radius: 50%; transform-origin: center; transform: translate(-50%, -50%); position: absolute; animation: scale 2s ease-in infinite; } .loader div:nth-child(1){ top: 0%; left: 50%; animation-delay: 0; } .loader div:nth-child(2){ top: 9%; left: 78%; animation-delay: 0.4s; } .loader div:nth-child(3){ top: 30%; left: 96%; animation-delay: 0.8s; } .loader div:nth-child(4){ top: 58%; left: 100%; animation-delay: 1.2s; } .loader div:nth-child(5){ top: 84%; left: 88%; animation-delay: 1.6s; } @keyframes rotate{ 0%{ transform: rotate(0deg); } 65%{ transform: rotate(180deg); } 95%,100%{ transform: rotate(360deg); } } @keyframes scale{ 0%,60%,100%{ opacity: 1; transform: scale(1) translate(-50%, -50%); } 30%{ border-radius: 10%; opacity: 0.5; transform: scale(1.5) translate(-50%, -50%); } }