纯CSS自定义酷炫进度条

{"code":{"html":"","css":".progress-wrapper {\n background: #e1dbf0;\n border:solid 1px #e1dbf0;\n border-radius:10px;\n height: 20px;\n overflow: hidden;\n width: 100%;\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;\n /*progress width*/\n width: 50%;\n}\n\n.progress-bar {\n background: #2e1098;\n height: inherit;\n}\n\n.progress-bar-width{\n border-radius: 10px;\n width: 60%;\n}\n\n.progress-bar-anim {\n animation: progress 3s linear infinite;\n /* Don't touch this anim bar color*/\n background: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.25) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.25) 50%,\n rgba(255, 255, 255, 0.25) 75%,\n transparent 75%,\n transparent);\n /* Don't touch this */\n background-repeat: repeat-x;\n /* The size of the bars must match the background-position in the @keyframes */\n background-size: 1.5em 1.5em;\n border-radius: 10px;\n height: inherit;\n width: 100%;\n}\n\n@keyframes progress {\n to { background-position: 1.5em 0; }\n}","js":""},"layout":"top","options":{"activeKey":"player","hide":{"html":false,"css":false,"js":false},"name":{"html":"HTML","css":"CSS","js":"JavaScript"}}}