@enact/ui/ProgressBar/ProgressBar.module.css

A collection of simplified unstyled cross-platform UI components for Enact

.progressBar {
  --ui-progressbar-proportion-start: 0;
  --ui-progressbar-proportion-start-background: 0;
  --ui-progressbar-proportion-end: 0;
  --ui-progressbar-proportion-end-background: 0;
  position: relative;
  direction: ltr;
}
.progressBar .bar,
.progressBar .fill,
.progressBar .load {
  position: absolute;
}
.progressBar.vertical {
  display: inline-block;
}
.progressBar.vertical .bar,
.progressBar.vertical .fill,
.progressBar.vertical .load {
  height: 100%;
  width: 100%;
  bottom: 0;
}
.progressBar.vertical .fill {
  bottom: calc(var(--ui-progressbar-proportion-start) * 100%);
  height: calc(var(--ui-progressbar-proportion-end) * 100%);
}
.progressBar.vertical .load {
  bottom: calc(var(--ui-progressbar-proportion-start-background) * 100%);
  height: calc(var(--ui-progressbar-proportion-end-background) * 100%);
}
.progressBar.horizontal .bar,
.progressBar.horizontal .fill,
.progressBar.horizontal .load {
  height: 100%;
}
.progressBar.horizontal .bar {
  width: 100%;
}
.progressBar.horizontal .fill {
  left: calc(var(--ui-progressbar-proportion-start) * 100%);
  width: calc(var(--ui-progressbar-proportion-end) * 100%);
}
.progressBar.horizontal .load {
  left: calc(var(--ui-progressbar-proportion-start-background) * 100%);
  width: calc(var(--ui-progressbar-proportion-end-background) * 100%);
}
.progressBar.radial .bar {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border-style: solid;
  box-sizing: border-box;
}
.progressBar.radial .fill,
.progressBar.radial .load {
  clip-path: inset(0 0 0 50%);
}
.progressBar.radial .fill::before,
.progressBar.radial .load::before,
.progressBar.radial .fill::after,
.progressBar.radial .load::after {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border-style: solid;
  box-sizing: border-box;
  position: absolute;
  content: "";
}
.progressBar.radial .fill::before,
.progressBar.radial .load::before {
  clip-path: inset(0 0 0 50%);
  display: none;
}
.progressBar.radial .fill::after,
.progressBar.radial .load::after {
  clip-path: inset(0 50% 0 0);
}
.progressBar.radial .fill::after {
  transform: rotate(calc(var(--ui-progressbar-proportion-end) * 360deg));
}
.progressBar.radial .load::after {
  transform: rotate(calc(var(--ui-progressbar-proportion-end-background) * 360deg));
}
.progressBar.radial.fillOverHalf .fill,
.progressBar.radial.loadOverHalf .load {
  clip-path: initial;
}
.progressBar.radial.fillOverHalf .fill::before,
.progressBar.radial.loadOverHalf .load::before {
  display: block;
}