Loader by Yogeshawghad0477
#212121
1#h2 { 2 color: white; 3 mix-blend-mode: difference; /* this will change color of loading text */ 4 text-align: center; 5 margin: 0; 6 font-size: 12px; 7 line-height: 30px; 8 font-family: Arial, Helvetica, sans-serif; 9 text-shadow: 0 0 3px; 10 padding: 0; 11 letter-spacing: 5px; 12} 13 14.div { 15 position: relative; 16 top: 0px; 17 left: 0%; 18 max-width: 200px; /* Use viewport width for responsive width */ 19 width: 100%; 20 height: 30px; 21 background: linear-gradient(to right, white, black); 22 background-size: 200% 100%; 23 animation-delay: 2s; 24 border-radius: 10px; 25 box-shadow: 0 0 3px; 26 -webkit-box-reflect: below 1px 27 linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 28 animation: gradientAnimation 10s linear infinite reverse; 29} 30 31@keyframes gradientAnimation { 32 0% { 33 background-position: 0; 34 } 35 36 100% { 37 background-position: 200% 0; 38 } 39} 40 41/* Use media queries for responsiveness */ 42@media (max-width: 768px) { 43 .div { 44 width: 500px; /* Adjust width for smaller screens */ 45 left: 10%; 46 } 47} 48
333 views
333 views
MIT License