Loader by S4tyendra
#212121
1.container { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6} 7 8.container .preloader { 9 animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 10} 11 12@keyframes rotate { 13 50% { 14 transform: rotate(360deg); 15 } 16 17 100% { 18 transform: rotate(720deg); 19 } 20} 21 22.preloader span { 23 --c: #f23f3f; 24 position: absolute; 25 display: block; 26 height: 64px; 27 width: 64px; 28 background: var(--c); 29 border: 1px solid var(--c); 30 border-radius: 100%; 31} 32 33.preloader span:nth-child(1) { 34 transform: translate(-28px, -28px); 35 animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 36} 37 38@keyframes shape_1 { 39 60% { 40 transform: scale(0.4); 41 } 42} 43 44.preloader span:nth-child(2) { 45 transform: translate(28px, -28px); 46 animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 47} 48 49@keyframes shape_2 { 50 40% { 51 transform: scale(0.4); 52 } 53} 54 55.preloader span:nth-child(3) { 56 position: relative; 57 border-radius: 0px; 58 transform: scale(0.98) rotate(-45deg); 59 animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 60} 61 62@keyframes shape_3 { 63 50% { 64 border-radius: 100%; 65 transform: scale(0.5) rotate(-45deg); 66 } 67 68 100% { 69 transform: scale(0.98) rotate(-45deg); 70 } 71} 72 73.shadow { 74 position: relative; 75 top: 30px; 76 left: 50%; 77 transform: translateX(-50%); 78 display: block; 79 height: 16px; 80 width: 64px; 81 border-radius: 50%; 82 background-color: #d9d9d9; 83 border: 1px solid #d9d9d9; 84 animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 85} 86 87@keyframes shadow { 88 50% { 89 transform: translateX(-50%) scale(0.5); 90 border-color: #f2f2f2; 91 } 92} 93
1.1K views
1.1K views
Variations
1 MIT License