Loader by Shoh2008
#212121
1.loader { 2 width: 0; 3 height: 4.8px; 4 display: inline-block; 5 position: relative; 6 background: #FFF; 7 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 8 box-sizing: border-box; 9 animation: animFw 8s linear infinite; 10} 11 12.loader::after, 13 .loader::before { 14 content: ''; 15 width: 10px; 16 height: 1px; 17 background: #FFF; 18 position: absolute; 19 top: 9px; 20 right: -2px; 21 opacity: 0; 22 transform: rotate(-45deg) translateX(0px); 23 box-sizing: border-box; 24 animation: coli1 0.3s linear infinite; 25} 26 27.loader::before { 28 top: -4px; 29 transform: rotate(45deg); 30 animation: coli2 0.3s linear infinite; 31} 32 33@keyframes animFw { 34 0% { 35 width: 0; 36 } 37 38 100% { 39 width: 100%; 40 } 41} 42 43@keyframes coli1 { 44 0% { 45 transform: rotate(-45deg) translateX(0px); 46 opacity: 0.7; 47 } 48 49 100% { 50 transform: rotate(-45deg) translateX(-45px); 51 opacity: 0; 52 } 53} 54 55@keyframes coli2 { 56 0% { 57 transform: rotate(45deg) translateX(0px); 58 opacity: 1; 59 } 60 61 100% { 62 transform: rotate(45deg) translateX(-45px); 63 opacity: 0.7; 64 } 65} 66
1K views
1K views
Variations
1 MIT License