Loader by pravusagar
#e8e8e8
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 margin: auto; 6 padding: 0.6em; 7 border-radius: 10px; 8 background: linear-gradient( 9 90deg, 10 #3498db, 11 #2ecc71, 12 #e74c3c, 13 #f39c12, 14 #3498db 15 ); 16 background-size: 900% 900%; 17 animation: changeGradient 10s ease infinite; /* 10s duration, ease timing function, infinite loop */ 18 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 19} 20 21@keyframes changeGradient { 22 0% { 23 background-position: 0% 50%; 24 } 25 50% { 26 background-position: 100% 50%; 27 } 28 100% { 29 background-position: 0% 50%; 30 } 31} 32.loader-container { 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 flex-direction: column; 37 text-align: center; 38 background-color: #ffffff87; 39 padding: 20px; 40 border-radius: 10px; 41 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 42} 43 44.loader { 45 border: 8px solid #ffffff; 46 border-top: 8px solid #0000005f; 47 border-radius: 50%; 48 width: 50px; 49 height: 50px; 50 animation: spin 1s linear infinite; 51 margin-bottom: 20px; 52} 53 54.loading-text { 55 font-size: 20px; 56 color: #121212; 57} 58 59@keyframes spin { 60 0% { 61 transform: rotate(0deg); 62 } 63 100% { 64 transform: rotate(360deg); 65 } 66} 67
254 views
254 views
MIT License