Loader by shadowmurphy
#e8e8e8
1.loader { 2 display: flex; 3 justify-content: flex-start; 4 align-items: center; 5 width: 200px; 6 height: 15px; 7 background-color: rgb(2, 2, 17); 8 border-radius: 10px; 9 overflow: hidden; 10 position: relative; 11 margin-top: 15px; 12} 13 14.shape { 15 width: 50px; 16 height: 15px; 17 background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); 18 border-radius: 25px; 19 position: absolute; 20 animation: slide 1.9s linear infinite; 21 background-size: 200%; 22} 23 24@keyframes slide { 25 0% { 26 left: 0; 27 } 28 29 50% { 30 left: calc(100% - 50px); 31 } 32 33 100% { 34 left: 0; 35 } 36} 37 38@keyframes gradientChange { 39 0%, 100% { 40 background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); 41 } 42 43 50% { 44 background-image: linear-gradient(144deg, #00DDEB, #5B42F3 50%, #AF40FF); 45 } 46}
805 views
805 views
MIT License