396 views
1.spinner { 2 box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5; 3 position: relative; 4 height: 50px; 5 width: 230px; 6 border-radius: 8px; 7 overflow: hidden; 8 animation: rotate_5132 6s linear infinite; 9} 10 11.spinner:before { 12 display: block; 13 content: ""; 14 position: absolute; 15 left: 0; 16 top: 0; 17 height: 100%; 18 background-color: #42a5f5; 19 animation: load_5123 6s linear infinite; 20} 21 22@keyframes rotate_5132 { 23 0%, 24 42% { 25 transform: rotate(0deg); 26 } 27 28 48%, 29 92% { 30 transform: rotate(180deg); 31 } 32 33 100% { 34 transform: rotate(360deg); 35 } 36} 37 38@keyframes load_5123 { 39 0% { 40 width: 0; 41 } 42 43 40%, 44 50% { 45 width: 100%; 46 } 47 48 90%, 49 100% { 50 width: 0; 51 } 52} 53
JkHuger
JkHuger
MIT License