Loader by SelfMadeSystem
#e8e8e8
1.loader { 2 width: 12em; 3 height: 3em; 4 position: relative; 5 overflow: hidden; 6 border-bottom: 8px solid #000; 7 filter: url(#goo); 8} 9 10.loader::before { 11 content: ''; 12 width: 22em; 13 height: 18em; 14 background: #f00; 15 position: absolute; 16 border-radius: 50%; 17 left: -2em; 18 bottom: -18em; 19 animation: wee1 2s linear infinite; 20} 21 22.loader::after { 23 content: ''; 24 width: 16em; 25 height: 12em; 26 background: #0ff; 27 position: absolute; 28 border-radius: 50%; 29 left: -4em; 30 bottom: -12em; 31 animation: wee2 2s linear infinite 0.75s; 32} 33 34@keyframes wee1 { 35 0% { 36 transform: translateX(-10em) rotate(0deg); 37 } 38 39 100% { 40 transform: translateX(7em) rotate(180deg); 41 } 42} 43 44@keyframes wee2 { 45 0% { 46 transform: translateX(-8em) rotate(0deg); 47 } 48 49 100% { 50 transform: translateX(8em) rotate(180deg); 51 } 52}
1.1K views
1.1K views
MIT License