#e8e8e8
1.loader { 2 width: 48px; 3 height: 48px; 4 margin: auto; 5 position: relative; 6} 7 8.loader:before { 9 content: ''; 10 width: 48px; 11 height: 5px; 12 background: #f0808050; 13 position: absolute; 14 top: 60px; 15 left: 0; 16 border-radius: 50%; 17 animation: shadow324 0.5s linear infinite; 18} 19 20.loader:after { 21 content: ''; 22 width: 100%; 23 height: 100%; 24 background: #f08080; 25 position: absolute; 26 top: 0; 27 left: 0; 28 border-radius: 4px; 29 animation: jump7456 0.5s linear infinite; 30} 31 32@keyframes jump7456 { 33 15% { 34 border-bottom-right-radius: 3px; 35 } 36 37 25% { 38 transform: translateY(9px) rotate(22.5deg); 39 } 40 41 50% { 42 transform: translateY(18px) scale(1, .9) rotate(45deg); 43 border-bottom-right-radius: 40px; 44 } 45 46 75% { 47 transform: translateY(9px) rotate(67.5deg); 48 } 49 50 100% { 51 transform: translateY(0) rotate(90deg); 52 } 53} 54 55@keyframes shadow324 { 56 57 0%, 58 100% { 59 transform: scale(1, 1); 60 } 61 62 50% { 63 transform: scale(1.2, 1); 64 } 65}
Comments
Variations
1 MIT License