This post is saved as a draft.
#e8e8e8
1.loader { 2 width: 70px; 3 height: 190px; 4 background-image: linear-gradient(to right bottom, #000000, #141414, #202020, #2d2d2d, #3a3a3a); 5 border: 5px solid black; 6 border-radius: 18px; 7 position: relative; 8 display: flex; 9 flex-flow: row wrap; 10 justify-content: center; 11 align-items: center; 12 padding: 5px 0; 13} 14 15.loader:after { 16 content: ""; 17 position: absolute; 18 top: 100%; 19 right: 50%; 20 transform: translate(50%, -50%); 21 width: 10px; 22 height: 200px; 23 background-color: rgb(20, 20, 20); 24 z-index: -1000; 25 border: 5px solid black; 26} 27 28.loader-circle { 29 width: 50px; 30 height: 50px; 31 border-radius: 50%; 32 position: relative; 33} 34 35.loader-circle::after { 36 position: absolute; 37 content: ""; 38 top: 50%; 39 right: 50%; 40 transform: translate(50%, -50%); 41 height: 80%; 42 width: 80%; 43 background-image: linear-gradient( 44 to right bottom, 45 rgba(255, 255, 255, 0.05), 46 rgba(255, 255, 255, 0.1), 47 rgba(255, 255, 255, 0.2), 48 rgba(255, 255, 255, 0.3), 49 rgba(255, 255, 255, 0.4), 50 rgba(255, 255, 255, 0.5) 51 ); 52 border-radius: 50%; 53} 54 55.loader-circle:nth-child(1) { 56 background-color: red; 57 animation: changeGrayscale 1s linear infinite; 58 animation-delay: 0.15s; 59} 60 61.loader-circle:nth-child(2) { 62 background-color: rgb(255, 200, 0); 63 animation: changeGrayscale 1s linear infinite; 64 animation-delay: 0.3s; 65} 66 67.loader-circle:nth-child(3) { 68 background-color: rgb(36, 182, 0); 69 animation: changeGrayscale 1s linear infinite; 70 animation-delay: 0.45s; 71} 72 73@keyframes changeGrayscale { 74 0%, 100% { 75 filter: brightness(0); 76 /* En grayscale al principio y al final */ 77 } 78 79 50% { 80 filter: grayscale(0); 81 /* Sin grayscale en la mitad de la animación */ 82 } 83} 84 85
Variation of aloader
Variation of aloader