1.2K views
1.loader { 2 background-color: black; 3 position: relative; 4 width: 2.5em; 5 height: 2.5em; 6 transform-origin: center; 7 transition: 1s; 8 border-radius: 50px; 9 box-shadow: inset 0px 0px 10px purple, 10 inset 5px 5px 12px rgba(44, 0, 114, 0.8), 11 inset 8px 8px 1px rgba(160, 120, 255, 0.7), 12 0px 0px 1px rgba(160, 120, 255, 0.6); 13 animation: 1.2s linear infinite 0s running first682; 14} 15 16.loader div { 17 width: inherit; 18 height: inherit; 19 position: absolute; 20} 21 22#first { 23 transform: rotate(90deg) 24} 25 26#first::before { 27 --width: 1em; 28 --height: 1em; 29 content: ""; 30 position: absolute; 31 top: 100%; 32 left: calc(50% - var(--width)/2); 33 width: 1em; 34 height: 1em; 35 background-color: rgb(44, 0, 114); 36 box-shadow: inset 5px 5px 10px rgb(160, 120, 255), 37 0px 0px 2px white; 38 border-radius: 50px; 39 animation: 0.8s ease-in 0s infinite running jump2; 40} 41 42#second { 43 transform: rotate(90deg); 44} 45 46#second::before { 47 --width: 1em; 48 --height: 1em; 49 content: ""; 50 position: absolute; 51 top: 100%; 52 left: calc(50% - var(--width)/2); 53 width: 1em; 54 height: 1em; 55 background-color: rgb(44, 0, 114); 56 box-shadow: inset 5px 5px 10px rgb(160, 120, 255), 57 0px 0px 2px white; 58 border-radius: 50px; 59 animation: 1.5s ease-in 0s infinite running jump2; 60} 61 62#third { 63 transform: rotate(90deg) 64} 65 66#third::before { 67 --width: 1em; 68 --height: 1em; 69 content: ""; 70 position: absolute; 71 top: 100%; 72 left: calc(50% - var(--width)/2); 73 width: 1em; 74 height: 1em; 75 background-color: rgb(44, 0, 114); 76 box-shadow: inset 5px 5px 10px rgb(160, 120, 255), 77 0px 0px 2px white; 78 border-radius: 50px; 79 animation: 1.6s ease-in 0s infinite running jump2; 80} 81 82.loader::after { 83 --width: 1em; 84 --height: 1em; 85 content: ""; 86 position: absolute; 87 top: 100%; 88 left: calc(50% - var(--width)/2); 89 width: 1em; 90 height: 1em; 91 background-color: rgb(44, 0, 114); 92 box-shadow: inset 5px 5px 10px rgb(160, 120, 255), 93 0px 0px 2px white; 94 border-radius: 50px; 95 animation: 1.2s ease-in 1s alternate infinite running jump2; 96} 97 98@keyframes first682 { 99 0% { 100 transform: rotate(0deg); 101 } 102 103 25% { 104 transform: rotate(0deg); 105 transform: rotate(90deg) 106 } 107 108 50% { 109 transform: rotate(90deg); 110 transform: rotate(180deg); 111 } 112 113 75% { 114 transform: rotate(180deg); 115 transform: rotate(270deg) 116 } 117 118 100% { 119 transform: rotate(270deg); 120 transform: rotate(360deg); 121 } 122} 123 124@keyframes jump2 { 125 0% { 126 top: 100%; 127 } 128 129 25% { 130 top: 230% 131 } 132 133 50% { 134 top: 100%; 135 } 136 137 75% { 138 height: 0.6em 139 } 140 141 100% { 142 height: 1em 143 } 144}
Navarog21
Arkiweez
MIT License