This post is saved as a draft.
#e8e8e8
1.loader { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100%; 6} 7 8.box { 9 width: 50px; 10 height: 50px; 11 border: 4px solid #3498db; 12 animation: box-expand 1s ease-in-out infinite alternate; 13} 14 15.circle { 16 width: 30px; 17 height: 30px; 18 border-radius: 50%; 19 border: 4px solid transparent; 20 border-top-color: #f1c40f; 21 animation: circle-rotate 1s linear infinite; 22} 23 24.triangle { 25 width: 0; 26 height: 0; 27 border-left: 15px solid transparent; 28 border-right: 15px solid transparent; 29 border-bottom: 30px solid #e74c3c; 30 animation: triangle-expand 1s ease-in-out infinite alternate; 31} 32 33@keyframes box-expand { 34 0% { 35 transform: scale(1); 36 } 37 38 100% { 39 transform: scale(1.2); 40 } 41} 42 43@keyframes circle-rotate { 44 to { 45 transform: rotate(360deg); 46 } 47} 48 49@keyframes triangle-expand { 50 0% { 51 width: 0; 52 height: 0; 53 } 54 55 100% { 56 width: 30px; 57 height: 60px; 58 } 59} 60
Variation of aloader
Variation of aloader