@opentiny/vue-theme/progress/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-progress{--tv-Progress-outer-bg-color:var(--tv-color-bg-gray-2, #e6e6e6);--tv-Progress-inner-bg-color:var(--tv-color-bg-progressbar, #5cb300);--tv-Progress-inner-font-size:var(--tv-font-size-default, 14px);--tv-Progress-inner-text-color:var(--tv-color-text-inverse, #ffffff);--tv-Progress-bg-color-success:var(--tv-color-success-bg, #5cb300);--tv-Progress-bg-color-warning:var(--tv-color-warn-bg, #ff8800);--tv-Progress-bg-color-exception:var(--tv-color-error-bg, #f23030);--tv-Progress-right-text-margin-left:var(--tv-space-lg, 12px);--tv-Progress-right-text-color:var(--tv-color-text, #191919);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.tiny-progress-bar{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-progress-bar__outer{position:relative;height:6px;overflow:hidden;vertical-align:middle;background-color:var(--tv-Progress-outer-bg-color)}.tiny-progress-bar__inner{position:absolute;left:0;top:0;height:100%;line-height:1;text-align:right;white-space:nowrap;background-color:var(--tv-Progress-inner-bg-color);-webkit-transition:width .6s ease;transition:width .6s ease}.tiny-progress-bar__inner::after{content:'';height:100%}.tiny-progress-bar__innerText{margin:0 5px;font-size:var(--tv-Progress-inner-font-size);color:var(--tv-Progress-inner-text-color)}.tiny-progress-bar,.tiny-progress-bar__inner::after,.tiny-progress-bar__innerText{display:inline-block;vertical-align:middle}.tiny-progress.is-success .tiny-progress-bar__inner{background-color:var(--tv-Progress-bg-color-success)}.tiny-progress.is-success .tiny-progress__text svg{fill:var(--tv-Progress-bg-color-success)}.tiny-progress.is-warning .tiny-progress-bar__inner{background-color:var(--tv-Progress-bg-color-warning)}.tiny-progress.is-warning .tiny-progress__text svg{fill:var(--tv-Progress-bg-color-warning)}.tiny-progress.is-exception .tiny-progress-bar__inner{background-color:var(--tv-Progress-bg-color-exception)}.tiny-progress.is-exception .tiny-progress__text svg{fill:var(--tv-Progress-bg-color-exception)}.tiny-progress__text{display:inline-block;margin-left:var(--tv-Progress-right-text-margin-left);font-size:14px;line-height:1;vertical-align:middle;white-space:nowrap;color:var(--tv-Progress-right-text-color)}.tiny-progress__text i{display:inline-block;vertical-align:middle}.tiny-progress--text-inside .tiny-progress-bar{margin-right:0;padding-right:0}.tiny-progress--without-text .tiny-progress__text{display:none}.tiny-progress--without-text .tiny-progress-bar{padding-right:0;margin-right:0;display:block}.tiny-progress--circle,.tiny-progress--dashboard{display:inline-block}.tiny-progress--circle .tiny-progress__text,.tiny-progress--dashboard .tiny-progress__text{position:absolute;left:0;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);margin:0;width:100%;text-align:center}.tiny-progress--circle .tiny-progress__text i,.tiny-progress--dashboard .tiny-progress__text i{display:inline-block;vertical-align:middle}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}