song-ui-u/theme/progress.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-progress{--x-progress-bg-color:var(--x-color-primary);--x-progress-color:var(--x-color-primary);--x-progress-border-color:var(--x-color-primary);--x-progress-text-color:var(--x-color-primary);display:flex;align-items:center;gap:8px}.x-progress__bar{position:relative;width:200px;border-radius:20px;overflow:hidden;border:2px solid var(--x-progress-border-color)}.x-progress__inner{position:absolute;top:0;left:0;height:100%;background-color:var(--x-progress-bg-color);transition:width .3s ease-in-out}.x-progress__inner-content{display:flex;color:#fff;height:100%;line-height:1;justify-content:end;align-items:center;font-size:14px;padding-right:8px}.x-progress__text{font-size:14px;color:var(--x-progress-text-color)}.x-progress--primary{--x-progress-bg-color:var(--x-color-primary);--x-progress-color:var(--x-color-primary);--x-progress-border-color:var(--x-color-primary);--x-progress-text-color:var(--x-color-primary)}.x-progress--success{--x-progress-bg-color:var(--x-color-success);--x-progress-color:var(--x-color-success);--x-progress-border-color:var(--x-color-success);--x-progress-text-color:var(--x-color-success)}.x-progress--warning{--x-progress-bg-color:var(--x-color-warning);--x-progress-color:var(--x-color-warning);--x-progress-border-color:var(--x-color-warning);--x-progress-text-color:var(--x-color-warning)}.x-progress--error{--x-progress-bg-color:var(--x-color-error);--x-progress-color:var(--x-color-error);--x-progress-border-color:var(--x-color-error);--x-progress-text-color:var(--x-color-error)}