htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/misc/_progressbar.scss

// core
.p-progressbar {
  position: relative;
  overflow: hidden;
}

.p-progressbar-determinate .p-progressbar-value {
  height: 100%;
  width: 0%;
  position: absolute;
  display: none;
  border: 0 none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-progressbar-determinate .p-progressbar-label {
  display: inline-flex;
}

.p-progressbar-determinate .p-progressbar-value-animate {
  transition: width 1s ease-in-out;
}

.p-progressbar-indeterminate .p-progressbar-value::before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: p-progressbar-indeterminate-anim 2.1s
    cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  animation: p-progressbar-indeterminate-anim 2.1s
    cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.p-progressbar-indeterminate .p-progressbar-value::after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s
    cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation: p-progressbar-indeterminate-anim-short 2.1s
    cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
  animation-delay: 1.15s;
}

@-webkit-keyframes p-progressbar-indeterminate-anim {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes p-progressbar-indeterminate-anim {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@-webkit-keyframes p-progressbar-indeterminate-anim-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes p-progressbar-indeterminate-anim-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

// theme
.p-progressbar {
  border: $progressBarBorder;
  height: $progressBarHeight;
  background: $progressBarBg;
  border-radius: $borderRadius;

  .p-progressbar-value {
    border: 0 none;
    margin: 0;
    background: $progressBarValueBg;
  }

  .p-progressbar-label {
    color: $progressBarValueTextColor;
    line-height: $progressBarHeight;
  }
}