zarm-web/es/progress/style/index.css

基于 React 的桌面端UI库

/* border */
/* box shadow */
/* btn */
.ui-progress {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 12px;
  /* Progress themes */
  /* Progress sizes */
}
.ui-progress .ui-progress-bg {
  font-size: 14px;
  height: 8px;
  line-height: 8px;
}
.ui-progress.radius {
  border-radius: 4px;
}
.ui-progress.radius .ui-progress-line-inner,
.ui-progress.radius .ui-progress-bg {
  border-radius: 4px;
}
.ui-progress.round {
  border-radius: 1000px;
}
.ui-progress.round .ui-progress-line-inner,
.ui-progress.round .ui-progress-bg {
  border-radius: 1000px;
}
.ui-progress.theme-default .ui-progress-bg {
  background-color: #e6e6e6;
}
.ui-progress.theme-info .ui-progress-bg {
  background-color: #12c287;
}
.ui-progress.theme-success .ui-progress-bg {
  background-color: #69c964;
}
.ui-progress.theme-warning .ui-progress-bg {
  background-color: #eca632;
}
.ui-progress.theme-error .ui-progress-bg {
  background-color: #e55546;
}
.ui-progress.size-xl .ui-progress-bg {
  font-size: 18px;
  height: 20px;
  line-height: 20px;
}
.ui-progress.size-xl.radius {
  border-radius: 6px;
}
.ui-progress.size-xl.radius .ui-progress-line-inner,
.ui-progress.size-xl.radius .ui-progress-bg {
  border-radius: 6px;
}
.ui-progress.size-xl.round {
  border-radius: 1000px;
}
.ui-progress.size-xl.round .ui-progress-line-inner,
.ui-progress.size-xl.round .ui-progress-bg {
  border-radius: 1000px;
}
.ui-progress.size-lg .ui-progress-bg {
  font-size: 16px;
  height: 14px;
  line-height: 14px;
}
.ui-progress.size-lg.radius {
  border-radius: 6px;
}
.ui-progress.size-lg.radius .ui-progress-line-inner,
.ui-progress.size-lg.radius .ui-progress-bg {
  border-radius: 6px;
}
.ui-progress.size-lg.round {
  border-radius: 1000px;
}
.ui-progress.size-lg.round .ui-progress-line-inner,
.ui-progress.size-lg.round .ui-progress-bg {
  border-radius: 1000px;
}
.ui-progress.size-sm .ui-progress-bg {
  font-size: 12px;
  height: 4px;
  line-height: 4px;
}
.ui-progress.size-sm.radius {
  border-radius: 4px;
}
.ui-progress.size-sm.radius .ui-progress-line-inner,
.ui-progress.size-sm.radius .ui-progress-bg {
  border-radius: 4px;
}
.ui-progress.size-sm.round {
  border-radius: 1000px;
}
.ui-progress.size-sm.round .ui-progress-line-inner,
.ui-progress.size-sm.round .ui-progress-bg {
  border-radius: 1000px;
}
.ui-progress.size-xs .ui-progress-bg {
  font-size: 12px;
  height: 2px;
  line-height: 2px;
}
.ui-progress.size-xs.radius {
  border-radius: 4px;
}
.ui-progress.size-xs.radius .ui-progress-line-inner,
.ui-progress.size-xs.radius .ui-progress-bg {
  border-radius: 4px;
}
.ui-progress.size-xs.round {
  border-radius: 1000px;
}
.ui-progress.size-xs.round .ui-progress-line-inner,
.ui-progress.size-xs.round .ui-progress-bg {
  border-radius: 1000px;
}

.ui-progress-line-outer {
  padding-right: 45px;
  display: inline-block;
  width: 100%;
  margin-right: -45px;
}

.ui-progress-line-inner {
  display: inline-block;
  width: 100%;
  background-color: #f3f3f3;
  vertical-align: middle;
}

.ui-progress-bg {
  position: relative;
  transition: all 0.5s ease 0s;
}

.ui-progress-line-text {
  display: inline-block;
  width: 35px;
  text-align: left;
  margin-left: 10px;
  vertical-align: middle;
}