لودینگ شماره سه
html
css #loading-3{ margin-top: 1vh; margin-left: 45vw; position:relative; width: 42px; height: 42px; animation: loading-3 4s infinite linear; } #loading-3 i { width:20px; height:20px; position:absolute; background:red; display:block; animation: loading-3-sub 2s infinite linear; } #loading-3 i:nth-child(1){ background:#2ecc71; } #loading-3 i:nth-child(2){ left:22px; background:#9b59b6; animation-delay: .5s; } #loading-3 i:nth-child(3){ top:22px; background:#3498db; animation-delay: 1.0s; } #loading-3 i:nth-child(4){ top:22px; left:22px; background:#f1c40f; animation-delay: 1.5s; } @keyframes loading-3 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes loading-3-sub { 0% { transform:scale(1); } 50% { transform:scale(0.5); } 100% { transform:scale(1); } }
css
js