kwooshung/react-progressbar-wrapper

.ks-progressbar {
  position: absolute;
  overflow: hidden;
  transition:
    width 200ms ease 0ms,
    height 200ms ease 0ms,
    opacity var(--ks-progressbar-transition-duration, 300ms) ease var(--ks-progressbar-transition-delay, 500ms);
  user-select: none;
  pointer-events: none;
  z-index: 9999;

  &.done {
    opacity: 0;
  }

  // 位置, 顶部从左到右
  &.t-lr {
    top: 0;
    left: 0;
  }

  // 位置, 顶部从右到左
  &.t-rl {
    top: 0;
    right: 0;
  }

  // 位置, 底部从左到右
  &.b-lr {
    bottom: 0;
    left: 0;
  }

  // 位置, 底部从右到左
  &.b-rl {
    right: 0;
    bottom: 0;
  }

  // 位置, 左侧从上到下
  &.l-tb {
    top: 0;
    left: 0;
  }

  // 位置, 左侧从下到上
  &.l-bt {
    bottom: 0;
    left: 0;
  }

  // 位置, 右侧从上到下
  &.r-tb {
    top: 0;
    right: 0;
  }

  // 位置, 右侧从下到上
  &.r-bt {
    right: 0;
    bottom: 0;
  }

  // 横向滚动条，都是宽度的改变
  &.t-lr,
  &.t-rl,
  &.b-lr,
  &.b-rl {
    width: 0;
  }

  // 纵向滚动条，都是高度的改变
  &.l-tb,
  &.l-bt,
  &.r-tb,
  &.r-bt {
    height: 0;
  }

  > * {
    width: 100%;
    height: 100%;
  }
}