@oslokommune/punkt-css/dist/css/components/progressbar.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

.pkt-progressbar {
  --pkt-progress-width: 0%;
  --pkt-progress-label-width: 5rem;
}
.pkt-progressbar__container {
  margin: 0;
}
.pkt-progressbar__title {
  display: block;
  margin: 0;
  margin-bottom: 8px;
  text-align: left;
  font-weight: 500;
  font-size: 0.875rem;
}
.pkt-progressbar__title-center {
  text-align: center;
}
.pkt-progressbar__bar-wrapper {
  background-color: var(--pkt-color-grays-gray-100);
  height: 8px;
  overflow: hidden;
}
.pkt-progressbar__bar {
  background-color: var(--pkt-color-brand-dark-blue-1000);
  display: block;
  width: var(--pkt-progress-width);
  height: 100%;
  transition: width 0.5s ease;
}
.pkt-progressbar__bar--dark-blue {
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-progressbar__bar--green {
  background-color: var(--pkt-color-brand-green-1000);
}
.pkt-progressbar__bar--light-blue {
  background-color: var(--pkt-color-brand-blue-1000);
}
.pkt-progressbar__bar--red {
  background-color: var(--pkt-color-brand-red-1000);
}
.pkt-progressbar__status {
  margin-top: 8px;
  position: relative;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.75rem;
}
.pkt-progressbar__status--center {
  width: 100% !important;
  text-align: center;
}
.pkt-progressbar__status-placement--following {
  margin-left: max(0%, min(100% - var(--pkt-progress-label-width), var(--pkt-progress-width) - var(--pkt-progress-label-width) / 2));
  transition: margin-left 0.5s ease;
}