xtreme-ui/dist/components/base/ProgressBar/progressbar.css

Collection of reusable components that can be used in web projects

.xtrProgressBar{position:relative;width:100%;height:3px;display:flex;justify-content:flex-start;align-items:center;border-radius:9999px;overflow:hidden}.xtrProgressBar:before{content:"";position:absolute;left:0;width:100%;height:1px;border-radius:9999px;opacity:.3;background:var(--colorBorderPrimary);transition:all .5s var(--cubicBezierPrimary)}.xtrProgressBar>.progress{position:absolute;width:100%;height:3px;display:block;background:var(--gradientBrand);border-radius:9999px;transition:all .5s var(--cubicBezierPrimary)}.xtrProgressBar.intermediate{border-radius:9999px}.xtrProgressBar.intermediate:before{height:100%;background:hsl(var(--colorBrandPrimary))}.xtrProgressBar.intermediate>.progress{width:150%;background-image:repeating-linear-gradient(60deg,transparent,transparent .5rem,hsl(var(--colorBrandPrimary)) .5rem,hsl(var(--colorBrandPrimary)) 1.5rem);animation:barberPole .2s infinite linear}@keyframes barberPole{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}