x-progress {
  display: block;
  width: 100%;
  height: 0.25rem;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background-color: rgba(var(--color-primary-rgb, 66, 117, 242), 0.1);
  margin: 0 0;
}
.is-dark-mode x-progress {
  background-color: rgba(255, 255, 255, 0.1);
}
x-progress > span, x-progress > x-tooltip > span {
  display: block;
  position: absolute;
  height: 0.25rem;
  max-width: 100%;
  min-width: 0%;
  background-color: var(--color-primary, #4275F2);
  transition: 0.3s;
  border-radius: 0.5rem;
}
x-progress.progress-bar-loading > span {
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 0.25rem;
  background-color: var(--color-primary, #4275F2);
  animation: loading 1s linear infinite;
  -moz-animation: loading 1s linear infinite;
  -webkit-animation: loading 1s linear infinite;
  border-radius: 0.5rem;
}
x-progress.progress-bar-primary > span, x-progress.progress-bar-primary > x-tooltip > span {
  background-color: var(--color-primary, #4275F2);
}
x-progress.progress-bar-accent > span, x-progress.progress-bar-accent > x-tooltip > span {
  background-color: var(--color-accent, #F22710);
}
x-progress.progress-bar-danger > span, x-progress.progress-bar-danger > x-tooltip > span {
  background-color: var(--color-danger, #DC3545);
}
x-progress.progress-bar-warning > span, x-progress.progress-bar-warning > x-tooltip > span {
  background-color: var(--color-warning, #E3A32F);
}
x-progress.progress-bar-success > span, x-progress.progress-bar-success > x-tooltip > span {
  background-color: var(--color-success, #00AE69);
}
x-progress.progress-bar-info > span, x-progress.progress-bar-info > x-tooltip > span {
  background-color: var(--color-info, #2FAAC8);
}
x-progress.progress-bar-link > span, x-progress.progress-bar-link > x-tooltip > span {
  background-color: var(--color-link, #4275F2);
}
x-progress.progress-bar-blue > span, x-progress.progress-bar-blue > x-tooltip > span {
  background-color: var(--color-blue, #2D5FB5);
}
x-progress.progress-bar-indigo > span, x-progress.progress-bar-indigo > x-tooltip > span {
  background-color: var(--color-indigo, #5463B3);
}
x-progress.progress-bar-purple > span, x-progress.progress-bar-purple > x-tooltip > span {
  background-color: var(--color-purple, #7D55C7);
}
x-progress.progress-bar-pink > span, x-progress.progress-bar-pink > x-tooltip > span {
  background-color: var(--color-pink, #F66D9B);
}
x-progress.progress-bar-red > span, x-progress.progress-bar-red > x-tooltip > span {
  background-color: var(--color-red, #C73C36);
}
x-progress.progress-bar-orange > span, x-progress.progress-bar-orange > x-tooltip > span {
  background-color: var(--color-orange, #D97C35);
}
x-progress.progress-bar-yellow > span, x-progress.progress-bar-yellow > x-tooltip > span {
  background-color: var(--color-yellow, #D4AE32);
}
x-progress.progress-bar-green > span, x-progress.progress-bar-green > x-tooltip > span {
  background-color: var(--color-green, #38C172);
}
x-progress.progress-bar-teal > span, x-progress.progress-bar-teal > x-tooltip > span {
  background-color: var(--color-teal, #4DC0B5);
}
x-progress.progress-bar-cyan > span, x-progress.progress-bar-cyan > x-tooltip > span {
  background-color: var(--color-cyan, #6CB2EB);
}
x-progress.progress-bar-brown > span, x-progress.progress-bar-brown > x-tooltip > span {
  background-color: var(--color-brown, #574535);
}
x-progress.progress-bar-stone > span, x-progress.progress-bar-stone > x-tooltip > span {
  background-color: var(--color-stone, #38485A);
}