t-fighting-design/theme/progress.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-progress{display:flex;align-items:center;line-height:1}.f-progress__bar{flex-grow:1;box-sizing:border-box;background:#f1f1f1}.f-progress__fill{height:100%;transition:.3s;border-radius:100px;background:#2d5af1;text-align:right}.f-progress__fill .f-progress__percentage{color:#fff;font-size:12px;margin:0 8px;display:inline-block;vertical-align:middle}.f-progress__fill:after{content:"";display:inline-block;vertical-align:middle;height:100%}.f-progress__text{min-width:40px;line-height:1;margin-left:5px;font-size:14px}@keyframes f-progress-animation-panoramic{to{background-position:200% 0}}.f-progress .f-progress__fill-primary{background:#2d5af1}.f-progress .f-progress__fill-primary.f-progress__stripe{background:repeating-linear-gradient(-45deg,#2d5af1 25%,#2d5af1 0,#2d5af1 50%,#5277f3 0,#5277f3 75%,#5277f3 0);background-size:35px 35px;animation:f-progress-animation-panoramic 30s linear infinite}.f-progress .f-progress__fill-success{background:#52b35e}.f-progress .f-progress__fill-success.f-progress__stripe{background:repeating-linear-gradient(-45deg,#52b35e 25%,#52b35e 0,#52b35e 50%,#71c07a 0,#71c07a 75%,#71c07a 0);background-size:35px 35px;animation:f-progress-animation-panoramic 30s linear infinite}.f-progress .f-progress__fill-danger{background:#ff0200}.f-progress .f-progress__fill-danger.f-progress__stripe{background:repeating-linear-gradient(-45deg,#ff0200 25%,#ff0200 0,#ff0200 50%,#f9514f 0,#f9514f 75%,#f9514f 0);background-size:35px 35px;animation:f-progress-animation-panoramic 30s linear infinite}.f-progress .f-progress__fill-warning{background:#fcc202}.f-progress .f-progress__fill-warning.f-progress__stripe{background:repeating-linear-gradient(-45deg,#fcc202 25%,#fcc202 0,#fcc202 50%,#fccc2f 0,#fccc2f 75%,#fccc2f 0);background-size:35px 35px;animation:f-progress-animation-panoramic 30s linear infinite}