@cbpds/web-components/dist/collection/components/cbp-loader/cbp-loader.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop  --cbp-loader-color: var(--cbp-color-info-dark);
* @prop  --cbp-loader-color-dark: var(--cbp-color-info-light);
* @prop  --cbp-loader-center-color: var(--cbp-color-branding-cbp-light);
* @prop  --cbp-loader-center-color-dark: var(--cbp-color-branding-cbp-dark);
* @prop  --cbp-loader-track-color: var(--cbp-color-gray-cool-20);
* @prop  --cbp-loader-track-color-dark: var(--cbp-color-gray-cool-50);

* @prop  --cbp-loader-status-description-color: var(--cbp-color-text-darkest);
* @prop  --cbp-loader-status-description-color-dark: var(--cbp-color-text-lightest);
* @prop  --cbp-loader-status-indicator-color: var(--cbp-color-white);
* @prop  --cbp-loader-status-indicator-color-dark: var(--cbp-color-black);

* @prop  --cbp-loader-linear-height: var(--cbp-space-2x);
* @prop  --cbp-loader-linear-width: 100%;
* @prop  --cbp-loader-linear-status-width: var(--cbp-loader-linear-width);
* @prop  --cbp-loader-linear-flex-direction: column;
* @prop  --cbp-loader-linear-gap: var(--cbp-space-2x);

* @prop  --cbp-loader-diameter: var(--cbp-space-12x);
* @prop  --cbp-loader-gutter-width: var(--cbp-space-2x);

* @prop  --cbp-loader-status-indicator-diameter: var(--cbp-space-4x);

* @prop  --cbp-loader-circular-determinate: var(--cbp-loader-track-color);
*/
:root {
  --cbp-loader-color: var(--cbp-color-info-dark);
  --cbp-loader-color-dark: var(--cbp-color-info-light);
  --cbp-loader-center-color: var(--cbp-color-branding-cbp-light);
  --cbp-loader-center-color-dark: var(--cbp-color-branding-cbp-dark);
  --cbp-loader-track-color: var(--cbp-color-gray-cool-20);
  --cbp-loader-track-color-dark: var(--cbp-color-gray-cool-50);
  --cbp-loader-status-description-color: var(--cbp-color-text-darkest);
  --cbp-loader-status-description-color-dark: var(--cbp-color-text-lightest);
  --cbp-loader-status-description-line-height: 3.5;
  --cbp-loader-status-indicator-color: var(--cbp-color-white);
  --cbp-loader-status-indicator-color-dark: var(--cbp-color-black);
  --cbp-loader-status-description-padding: 0 0 0 var(--cbp-space-2x);
  --cbp-loader-linear-height: var(--cbp-space-2x);
  --cbp-loader-linear-width: 100%;
  --cbp-loader-linear-status-width: var(--cbp-loader-linear-width);
  --cbp-loader-linear-flex-direction: column;
  --cbp-loader-linear-gap: var(--cbp-space-2x);
  --cbp-loader-diameter: var(--cbp-space-12x);
  --cbp-loader-gutter-width: var(--cbp-space-2x);
  --cbp-loader-status-indicator-diameter: var(--cbp-space-4x);
  --cbp-loader-circular-determinate: var(--cbp-loader-track-color);
  --cbp-loader-flex-direction: row;
  --cbp-loader-font-weight: var(--cbp-font-weight-medium);
  --cbp-loader-font-size: var(--cbp-font-size-subhead);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-loader[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-loader:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-loader-color: var(--cbp-loader-color-dark);
  --cbp-loader-center-color: var(--cbp-loader-center-color-dark);
  --cbp-loader-track-color: var(--cbp-loader-track-color-dark);
  --cbp-loader-status-description-color: var(--cbp-loader-status-description-color-dark);
  --cbp-loader-status-indicator-color: var(--cbp-loader-status-indicator-color-dark);
}

@keyframes spin {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(400%);
  }
}
cbp-loader {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  /** generic style reset/cross variant styles */
}
cbp-loader label {
  font-size: var(--cbp-loader-font-size);
  font-weight: var(--cbp-loader-font-weight);
  align-self: flex-start;
}
cbp-loader[variant=linear] {
  --cbp-icon-size: var(--cbp-space-3x);
  width: var(--cbp-loader-linear-width);
  display: inline-flex;
  flex-direction: var(--cbp-loader-linear-flex-direction);
  align-items: center;
  gap: var(--cbp-loader-linear-gap);
}
cbp-loader[variant=linear] progress {
  appearance: none;
  height: var(--cbp-loader-linear-height);
}
cbp-loader[variant=linear] progress::-webkit-progress-bar {
  background-color: var(--cbp-loader-track-color);
}
cbp-loader[variant=linear] progress::-webkit-progress-value {
  background-color: var(--cbp-loader-color);
}
cbp-loader[variant=linear]:not([determinate]):not([error]):not([success]) progress:before {
  content: "";
  display: block;
  height: var(--cbp-loader-linear-height);
  width: 20%;
  background-color: var(--cbp-loader-color);
  position: absolute;
  animation: slide 2s cubic-bezier(0.2, 0, 0.38, 0.9) infinite;
}
cbp-loader[variant=linear][determinate] label {
  color: var(--cbp-loader-status-description-color);
  display: inline-flex;
  width: var(--cbp-loader-linear-status-width);
  height: var(--cbp-space-4x);
  white-space: nowrap;
}
cbp-loader[variant=linear][determinate] label span:last-of-type {
  margin-left: auto;
}
cbp-loader[variant=linear][size=small][success] label, cbp-loader[variant=linear][size=small][error] label {
  text-wrap: nowrap;
}
cbp-loader[variant=circular] {
  display: inline-flex;
  flex-direction: var(--cbp-loader-flex-direction);
}
cbp-loader[variant=circular] label {
  color: var(--cbp-loader-status-description-color);
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  align-self: center;
  padding: var(--cbp-loader-status-description-padding);
  order: 2;
}
cbp-loader[variant=circular] progress {
  height: var(--cbp-loader-diameter);
  width: var(--cbp-loader-diameter);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cbp-border-radius-circle);
  overflow: hidden;
  padding: 0;
}
cbp-loader[variant=circular] progress::-webkit-progress-bar {
  display: none;
}
cbp-loader[variant=circular] progress:before {
  content: "";
  position: absolute;
  z-index: var(--cbp-z-index-level-1);
  height: var(--cbp-loader-diameter);
  width: var(--cbp-loader-diameter);
  border-radius: calc(var(--cbp-border-radius-circle) / 2);
  margin: auto auto;
  background: var(--cbp-loader-color);
}
cbp-loader[variant=circular] progress:after {
  content: "";
  position: absolute;
  z-index: var(--cbp-z-index-level-2);
  height: calc(var(--cbp-loader-diameter) - var(--cbp-loader-gutter-width));
  width: calc(var(--cbp-loader-diameter) - var(--cbp-loader-gutter-width));
  border-radius: calc(var(--cbp-border-radius-circle) / 2);
  margin: auto auto;
  background: var(--cbp-loader-center-color);
}
cbp-loader[variant=circular][size=small][success] progress, cbp-loader[variant=circular][size=small][error] progress {
  display: none;
}
cbp-loader[variant=circular][size=large][success] span, cbp-loader[variant=circular][size=large][error] span {
  position: absolute;
  width: var(--cbp-loader-diameter);
  line-height: var(--cbp-loader-status-description-line-height);
  text-align: center;
  z-index: var(--cbp-z-index-level-3);
}
cbp-loader[variant=circular]:not([determinate]):not([error]):not([success]) ::before {
  transform: rotate(45deg);
  animation: spin 2s linear infinite;
}
cbp-loader[variant=circular][determinate] progress:before {
  background: var(--cbp-loader-circular-determinate);
}
cbp-loader[variant=circular][determinate] .cbp-loader-desc {
  position: absolute;
  width: var(--cbp-loader-diameter);
  line-height: var(--cbp-loader-status-description-line-height);
  text-align: center;
  z-index: var(--cbp-z-index-level-3);
  color: var(--cbp-loader-color);
  font-weight: var(--cbp-font-weight-bold);
}
cbp-loader[variant=circular][orientation=horizontal] {
  --cbp-loader-status-description-padding: 0 0 0 var(--cbp-space-1x);
  --cbp-loader-flex-direction: row;
}
cbp-loader[variant=circular][orientation=vertical]:not([size=small]) {
  --cbp-loader-status-description-padding: var(--cbp-space-1x) 0 0 0;
  --cbp-loader-flex-direction: column;
}
cbp-loader[error] {
  --cbp-loader-color: var(--cbp-color-danger-dark);
  --cbp-loader-color-dark: var(--cbp-color-danger-light);
  --cbp-loader-track-color: var(--cbp-color-danger-dark);
  --cbp-loader-track-color-dark: var(--cbp-color-danger-light);
  --cbp-loader-status-description-color: var(--cbp-color-danger-dark);
  --cbp-loader-status-description-color-dark: var(--cbp-color-danger-light);
  --cbp-loader-status-indicator-color: var(--cbp-color-danger-dark);
  --cbp-loader-status-indicator-color-dark: var(--cbp-color-danger-light);
}
cbp-loader[success] {
  --cbp-loader-color: var(--cbp-color-success-base);
  --cbp-loader-color-dark: var(--cbp-color-success-light);
  --cbp-loader-track-color: var(--cbp-color-success-base);
  --cbp-loader-track-color-dark: var(--cbp-color-success-light);
  --cbp-loader-status-description-color: var(--cbp-color-success-base);
  --cbp-loader-status-description-color-dark: var(--cbp-color-success-light);
  --cbp-loader-status-indicator-color: var(--cbp-color-success-base);
  --cbp-loader-status-indicator-color-dark: var(--cbp-color-success-light);
}
cbp-loader[size=large] {
  --cbp-loader-diameter: var(--cbp-space-12x);
  --cbp-loader-gutter-width: var(--cbp-space-2x);
  --cbp-loader-linear-height: var(--cbp-space-2x);
  --cbp-loader-linear-flex-direction: column;
  --cbp-loader-linear-status-width: var(--cbp-loader-linear-width);
  --cbp-loader-linear-gap: var(--cbp-space-2x);
}
cbp-loader[size=small] {
  --cbp-loader-diameter: var(--cbp-space-4x);
  --cbp-loader-gutter-width: var(--cbp-space-1x);
  --cbp-loader-linear-height: var(--cbp-space-1x);
  --cbp-loader-linear-flex-direction: row;
  --cbp-loader-linear-status-width: min-content;
  --cbp-loader-linear-gap: var(--cbp-space-1x);
}
cbp-loader progress {
  height: inherit;
  width: inherit;
}