@oslokommune/punkt-css/dist/css/components/progressbar.min.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:.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 .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:.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 .5s ease}