@dnb/eufemia/components/progress-indicator/style/dnb-progress-indicator.min.css

DNB Eufemia Design System UI Library

.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:314.159265359%;--progress-indicator-circular-circle-offset--min:314.159265359%;--progress-indicator-circular-circle-offset--max:1%;--progress-indicator-circular-size:2rem;--progress-indicator-circular-stroke-width:calc(var(--progress-indicator-circular-size)/8);--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-size:0.5rem;--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{padding-left:1rem}.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label{padding-left:.5rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{padding-top:.5rem}.dnb-progress-indicator--inside .dnb-progress-indicator__label{justify-content:center;padding:var(--progress-indicator-circular-stroke-width);position:absolute;width:100%}.dnb-progress-indicator--small{--progress-indicator-circular-size:1rem;--progress-indicator-linear-size:0.25rem}.dnb-progress-indicator--medium{--progress-indicator-circular-size:1.5rem;--progress-indicator-linear-size:1rem}.dnb-progress-indicator--large{--progress-indicator-circular-size:3.5rem;--progress-indicator-linear-size:1.5rem}.dnb-progress-indicator--huge{--progress-indicator-circular-size:20rem;--progress-indicator-linear-size:2rem}.dnb-progress-indicator__circular{height:var(--progress-indicator-circular-size);position:relative;transform:rotate(-90deg);width:var(--progress-indicator-circular-size)}.dnb-progress-indicator__circular svg{bottom:0;height:100%;left:0;padding:calc(var(--progress-indicator-circular-stroke-width)/2);position:absolute;right:0;top:0;width:100%}.dnb-progress-indicator__circular svg:not(:root){overflow:visible}.dnb-progress-indicator__circular__background-padding{display:block;height:100%;padding:calc(var(--progress-indicator-circular-stroke-width)/2)}.dnb-progress-indicator__circular__background{background-color:transparent;border-radius:50%;display:block;height:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator__circular__line{animation-duration:.01ms;animation-iteration-count:1}}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition-duration:.01ms}}.dnb-progress-indicator__circular__circle{stroke-linecap:round;stroke-width:var(--progress-indicator-circular-stroke-width)}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color);stroke-width:calc(var(--progress-indicator-circular-stroke-width) - .5px)}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:calc(var(--progress-indicator-linear-size)/2);height:var(--progress-indicator-linear-size);overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator__linear__bar-transition{transition-duration:.01ms}}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator__linear__bar1-animation{animation-duration:.01ms;animation-iteration-count:1}}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator__linear__bar2-animation{animation-duration:.01ms;animation-iteration-count:1}}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}@media (prefers-reduced-motion:reduce){.dnb-progress-indicator{animation-duration:.01ms!important}}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation,.dnb-progress-indicator--no-animation.dnb-progress-indicator--complete{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}