Loader by Rodrypaladin
#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
405 views
405 views
MIT License