pragmate-ui/progress-bar/progress-bar.css

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

.pui-progress-bar {
  background-color: var(--surface-variant);
  width: 80%;
  height: 1.2rem;
  border-radius: var(--border-radius-base);
  overflow: hidden;
  transition: all 300ms;
}
.pui-progress-bar .progress-bar__progress {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 300ms;
}
.pui-progress-bar .progress-bar__progress.primary {
  background-color: var(--primary);
  color: var(--on-primary);
}
.pui-progress-bar .progress-bar__progress.secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
}
.pui-progress-bar .progress-bar__progress.tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
}
.pui-progress-bar .progress-bar__progress.success {
  background-color: var(--success);
  color: var(--on-success);
}
.pui-progress-bar .progress-bar__progress.danger {
  background-color: var(--danger);
  color: var(--on-danger);
}
.pui-progress-bar .progress-bar__progress.warning {
  background-color: var(--warning);
  color: var(--on-warning);
}
.pui-progress-bar .progress-bar__progress.info {
  background-color: var(--info);
  color: var(--on-info);
}


/*# sourceMappingURL=progress-bar.css.map*/