.x-progress-linear {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
}
.x-progress-linear--buffer {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  -webkit-transform-origin: center left;
          transform-origin: center left;
  background-color: currentColor;
  opacity: 0.3;
}
.x-progress-linear--determinate {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  -webkit-transform-origin: center left;
          transform-origin: center left;
  background-color: currentColor;
}
.x-progress-linear--surplus {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: currentColor;
  opacity: 0.3;
}
.x-progress-linear--stream {
  position: absolute;
  left: 100%;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.25s ease-out;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.x-progress-linear--stream::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-top: 4px dotted;
  border-color: currentColor;
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  opacity: 0.3;
  -webkit-animation: stream 0.2s linear infinite;
          animation: stream 0.2s linear infinite;
}
.x-progress-linear--indeterminate-long, .x-progress-linear--indeterminate-short {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.x-progress-linear--indeterminate-long::after, .x-progress-linear--indeterminate-short::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background-color: currentColor;
}
.x-progress-linear--indeterminate-long {
  -webkit-animation: indeterminate-long-offset 2.2s ease-in-out infinite;
          animation: indeterminate-long-offset 2.2s ease-in-out infinite;
}
.x-progress-linear--indeterminate-long::after {
  -webkit-animation: indeterminate-long-width 2.2s cubic-bezier(0.44, 0.14, 0.36, 0.79) infinite;
          animation: indeterminate-long-width 2.2s cubic-bezier(0.44, 0.14, 0.36, 0.79) infinite;
}
.x-progress-linear--indeterminate-short {
  -webkit-animation: indeterminate-short-offset 2.2s ease-in-out infinite;
          animation: indeterminate-short-offset 2.2s ease-in-out infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.x-progress-linear--indeterminate-short::after {
  -webkit-animation: indeterminate-short-width 2.2s cubic-bezier(0.65, 0.2, 0.16, 0.78) infinite;
          animation: indeterminate-short-width 2.2s cubic-bezier(0.65, 0.2, 0.16, 0.78) infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes stream {
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes stream {
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes indeterminate-long-offset {
  0% {
    -webkit-transform: translateX(-54%);
            transform: translateX(-54%);
  }
  100% {
    -webkit-transform: translateX(104%);
            transform: translateX(104%);
  }
}
@keyframes indeterminate-long-offset {
  0% {
    -webkit-transform: translateX(-54%);
            transform: translateX(-54%);
  }
  100% {
    -webkit-transform: translateX(104%);
            transform: translateX(104%);
  }
}
@-webkit-keyframes indeterminate-long-width {
  0% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
  50% {
    -webkit-transform: scaleX(0.72);
            transform: scaleX(0.72);
  }
  100% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
}
@keyframes indeterminate-long-width {
  0% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
  50% {
    -webkit-transform: scaleX(0.72);
            transform: scaleX(0.72);
  }
  100% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
}
@-webkit-keyframes indeterminate-short-offset {
  0% {
    -webkit-transform: translateX(-146%);
            transform: translateX(-146%);
  }
  20% {
    -webkit-transform: translateX(-146%);
            transform: translateX(-146%);
  }
  100% {
    -webkit-transform: translateX(54%);
            transform: translateX(54%);
  }
}
@keyframes indeterminate-short-offset {
  0% {
    -webkit-transform: translateX(-146%);
            transform: translateX(-146%);
  }
  20% {
    -webkit-transform: translateX(-146%);
            transform: translateX(-146%);
  }
  100% {
    -webkit-transform: translateX(54%);
            transform: translateX(54%);
  }
}
@-webkit-keyframes indeterminate-short-width {
  0% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
  50% {
    -webkit-transform: scaleX(0.66);
            transform: scaleX(0.66);
  }
  100% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
}
@keyframes indeterminate-short-width {
  0% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
  50% {
    -webkit-transform: scaleX(0.66);
            transform: scaleX(0.66);
  }
  100% {
    -webkit-transform: scaleX(0.08);
            transform: scaleX(0.08);
  }
}