2.3K views
CSSAdd prefixes
1.loading svg polyline { 2 fill: none; 3 stroke-width: 3; 4 stroke-linecap: round; 5 stroke-linejoin: round; 6} 7 8.loading svg polyline#back { 9 fill: none; 10 stroke: #ff4d5033; 11} 12 13.loading svg polyline#front { 14 fill: none; 15 stroke: #ff4d4f; 16 stroke-dasharray: 48, 144; 17 stroke-dashoffset: 192; 18 animation: dash_682 1.4s linear infinite; 19} 20 21@keyframes dash_682 { 22 72.5% { 23 opacity: 0; 24 } 25 26 to { 27 stroke-dashoffset: 0; 28 } 29} 30
HTML
1<div class="loading"> 2 <svg width="64px" height="48px"> 3 <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="back"></polyline> 4 <polyline points="0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24" id="front"></polyline> 5 </svg> 6</div>