.MYUI-Progress_in {
  border-radius: var(--border_radius_optimaze);
  width: 100%;
  height: 8px;
  transition: height 0.2s;
}

.MYUI-Progress--max .MYUI-Progress--success {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.MYUI-Progress {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border_radius_optimaze);

  box-sizing: border-box;
  padding: var(--PADDING_bottom_or_top) var(--PADDING_left_or_right) var(--PADDING_bottom_or_top) var(--PADDING_left_or_right);
}


.MYUI-Progress--max .MYUI-Progress_in {
  height: 16px;
  transition: height 0.2s;
}

.MYUI-Progress--loading .MYUI-Progress_in {
  height: 8px;
}

.MYUI-Progress--max .MYUI-Progress_in::-webkit-progress-value {
  background: rgba(var(--background_active), 0.7) !important;
}

.MYUI-Progress_in::-webkit-progress-bar {
  background: rgba(var(--background_secondary));
  border-radius: var(--border_radius_optimaze);
}

.MYUI-Progress_in::-webkit-progress-value {
  background: rgba(var(--background_dark_2));
  border-radius: var(--border_radius_optimaze);
  transition: inline-size .25s ease-out;
}

.MYUI-Progress--loading::after {
  content: "";
  z-index: 99;
  background: rgba(var(--background_secondary));
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.MYUI-Progress--loading {
  overflow: hidden;
  border-radius: var(--border_radius_optimaze);
}

.MYUI-Progress--loading::before {
  content: "";
  z-index: 100;
  display: block;
  background: rgba(var(--background_dark_2));
  position: absolute;
  border-radius: var(--border_radius_optimaze);
  width: calc(100% / 8);
  height: 100%;
  left: calc((100% / 8) - (100% / 8) * 2);
  background-position: right;
  animation: progress-loading 3s infinite ease;
}

@keyframes progress-loading {
  50% {
    left: 101%;
  }
}