纯CSS自定义酷炫进度条

Winter

2020-11-24

{"code":{"html":"<div class=\"progress-wrapper\">\n <div class=\"progress-bar progress-bar-width\" data-progress-bar-percent=\"100\">\n <div class=\"progress-bar-anim\">
\n
\n

”,”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”}}}</div>

</div>

第4269篇《纯CSS自定义酷炫进度条》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0条评论