vuestic-ui/dist/esm-node/VaProgressBar.css

Vue 3 UI Framework

:root,
:host {
  --va-progress-bar-width: 100%;
  --va-progress-bar-position: relative;
  --va-progress-bar-overflow: hidden;
  --va-progress-bar-height: 0.5rem;
  --va-progress-bar-border-radius: 9999999px;
  /* Small */
  --va-progress-bar-sm-height: 2px;
  /* Large */
  --va-progress-bar-lg-height: 16px;
  /* Info */
  --va-progress-bar-info-font-weight: 700;
  --va-progress-bar-info-text-align: center;
  --va-progress-bar-info-text-transform: uppercase;
  --va-progress-bar-info-not-empty-margin-bottom: 0.1rem;
  /* Buffer */
  --va-progress-bar-buffer-opacity: 0.3;
  --va-progress-bar-buffer-transition: width ease 2s;
  /* Overlay */
  --va-progress-bar-transition: width ease 2s;
  --va-progress-bar-letter-spacing: 0.6px;
  --va-progress-bar-line-height: 1;
  --va-progress-bar-font-size: 0.8em;
  --va-progress-bar-font-weight: 700;
}
.va-progress-bar {
  width: var(--va-progress-bar-width);
  position: relative;
  overflow: hidden;
  font-family: var(--va-font-family);
  line-height: var(--va-progress-bar-line-height);
}
.va-progress-bar__info {
  font-weight: var(--va-progress-bar-info-font-weight);
  text-align: var(--va-progress-bar-info-text-align);
  text-transform: var(--va-progress-bar-info-text-transform);
}
.va-progress-bar__info:not(:empty) {
  margin-bottom: var(--va-progress-bar-info-not-empty-margin-bottom);
}
.va-progress-bar__wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--va-progress-bar-border-radius);
}
.va-progress-bar--small .va-progress-bar__wrapper {
  height: var(--va-progress-bar-sm-height);
}
.va-progress-bar--medium .va-progress-bar__wrapper {
  height: var(--va-progress-bar-height);
}
.va-progress-bar--large .va-progress-bar__wrapper {
  height: var(--va-progress-bar-lg-height);
}
.va-progress-bar--square .va-progress-bar__wrapper {
  --va-progress-bar-border-radius: 0;
}
.va-progress-bar__buffer {
  position: absolute;
  top: 0;
  height: inherit;
  border-radius: inherit;
  transition: var(--va-progress-bar-buffer-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: var(--va-progress-bar-letter-spacing);
  font-size: var(--va-progress-bar-font-size);
  font-weight: var(--va-progress-bar-font-weight);
  background-color: var(--va-progress-bar-background-color);
}
.va-progress-bar__progress {
  height: inherit;
  border-radius: inherit;
  transition: var(--va-progress-bar-transition);
  background-color: var(--va-progress-bar-color);
}
.va-progress-bar__progress--indeterminate-start {
  background-color: var(--va-progress-bar-color);
  animation: va-progress-bar-indeterminate-start 2s ease-in infinite;
  position: absolute;
  height: inherit;
}
.va-progress-bar__progress--indeterminate-end {
  background-color: var(--va-progress-bar-color);
  animation: va-progress-bar-indeterminate-end 2s ease-out 1s infinite;
  position: absolute;
  height: inherit;
}
@keyframes va-progress-bar-indeterminate-start {
0% {
    width: 10%;
    left: -10%;
}
50% {
    width: 100%;
    left: 100%;
}
100% {
    width: 100%;
    left: 100%;
}
}
@keyframes va-progress-bar-indeterminate-end {
0% {
    width: 100%;
    left: -100%;
}
50% {
    width: 10%;
    left: 100%;
}
100% {
    width: 10%;
    left: 100%;
}
}