Loader by Sourcesketch
#e8e8e8
1.container { 2 width: 200px; 3 height: 200px; 4 position: absolute; 5 top: 50%; 6 left: 50%; 7 transform: translate(-50%, -50%); 8 margin: auto; 9 filter: url("#goo"); 10 animation: rotate-move 2s ease-in-out infinite; 11} 12 13.dot { 14 width: 70px; 15 height: 70px; 16 border-radius: 50%; 17 background-color: #000; 18 position: absolute; 19 top: 0; 20 bottom: 0; 21 left: 0; 22 right: 0; 23 margin: auto; 24} 25 26.dot-3 { 27 background-color: #ff1717; 28 animation: dot-3-move 2s ease infinite, index 6s ease infinite; 29} 30 31.dot-2 { 32 background-color: #0051ff; 33 animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite; 34} 35 36.dot-1 { 37 background-color: #ffc400; 38 animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite; 39} 40 41@keyframes dot-3-move { 42 20% { 43 transform: scale(1); 44 } 45 45% { 46 transform: translateY(-18px) scale(0.45); 47 } 48 60% { 49 transform: translateY(-90px) scale(0.45); 50 } 51 80% { 52 transform: translateY(-90px) scale(0.45); 53 } 54 100% { 55 transform: translateY(0px) scale(1); 56 } 57} 58 59@keyframes dot-2-move { 60 20% { 61 transform: scale(1); 62 } 63 45% { 64 transform: translate(-16px, 12px) scale(0.45); 65 } 66 60% { 67 transform: translate(-80px, 60px) scale(0.45); 68 } 69 80% { 70 transform: translate(-80px, 60px) scale(0.45); 71 } 72 100% { 73 transform: translateY(0px) scale(1); 74 } 75} 76 77@keyframes dot-1-move { 78 20% { 79 transform: scale(1); 80 } 81 45% { 82 transform: translate(16px, 12px) scale(0.45); 83 } 84 60% { 85 transform: translate(80px, 60px) scale(0.45); 86 } 87 80% { 88 transform: translate(80px, 60px) scale(0.45); 89 } 90 100% { 91 transform: translateY(0px) scale(1); 92 } 93} 94 95@keyframes rotate-move { 96 55% { 97 transform: translate(-50%, -50%) rotate(0deg); 98 } 99 80% { 100 transform: translate(-50%, -50%) rotate(360deg); 101 } 102 100% { 103 transform: translate(-50%, -50%) rotate(360deg); 104 } 105} 106 107@keyframes index { 108 0%, 109 100% { 110 z-index: 3; 111 } 112 33.3% { 113 z-index: 2; 114 } 115 66.6% { 116 z-index: 1; 117 } 118} 119
730 views
730 views
MIT License