#212121
1.loader { 2 width: 8px; 3 height: 40px; 4 border-radius: 4px; 5 display: block; 6 background-color: currentColor; 7 margin: 20px auto; 8 position: relative; 9 color: #f2f2f2; 10 animation: animloader 0.3s 0.3s linear infinite alternate; 11} 12 13.loader::after, 14.loader::before { 15 content: ''; 16 width: 8px; 17 height: 40px; 18 border-radius: 4px; 19 background: currentColor; 20 position: absolute; 21 top: 50%; 22 transform: translateY(-50%); 23 left: 20px; 24 animation: animloader 0.3s 0.45s linear infinite alternate; 25} 26 27.loader::before { 28 left: -20px; 29 animation-delay: 0s; 30} 31 32@keyframes animloader { 33 0% { 34 height: 48px; 35 } 36 37 100% { 38 height: 4px; 39 } 40}
1.4K views
1.4K views
Comments
Variations
1 MIT License