@trimble-oss/moduswebcomponents/collection/components/modus-wc-progress/modus-wc-progress.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

/**
* This component uses Tailwind CSS and DaisyUI.
* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
*/
modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress-label {
  font-size: var(--modus-wc-font-size-md);
  margin: 0 var(--modus-wc-spacing-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
modus-wc-progress.modus-wc-progress-container .modus-wc-progress {
  color: var(--modus-wc-color-primary);
}
modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress {
  color: var(--modus-wc-color-trimble-blue);
}
modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress.modus-wc-radial-progress--indeterminate {
  /* stylelint-disable-next-line custom-property-pattern */
  --value: var(--_value) !important;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: grow;
  animation-timing-function: ease-in-out;
}

[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress,
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress {
  appearance: none;
  background-color: transparent;
  border: 1px solid var(--modus-wc-color-gray-6);
  border-radius: var(--modus-wc-border-radius-sm);
  height: var(--modus-wc-line-height-sm);
  overflow: hidden;
  /* Override default progress element styling */
  width: 100%;
}
[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value,
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value {
  border-radius: var(--modus-wc-border-radius-sm);
}
[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar,
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar {
  border-radius: var(--modus-wc-border-radius-sm);
}
[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress .modus-wc-progress-label,
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress .modus-wc-progress-label {
  color: var(--modus-wc-color-white);
}

[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value {
  background-color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar {
  background-color: var(--modus-wc-color-trimble-blue);
}
[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress:indeterminate {
  background-color: transparent;
  --progress-color: var(--modus-wc-color-trimble-blue);
}

[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value {
  background-color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar {
  background-color: var(--modus-wc-color-highlight-blue);
}
[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress:indeterminate {
  background-color: transparent;
  --progress-color: var(--modus-wc-color-highlight-blue);
}

.modus-wc-radial-progress.modus-wc-radial-progress--indeterminate {
  /* stylelint-disable-next-line custom-property-pattern */
  --value: var(--_value) !important;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: grow;
  animation-timing-function: ease-in-out;
}

[data-theme=modus-classic-light] .modus-wc-radial-progress {
  color: var(--modus-wc-color-primary);
}

[data-theme=modus-classic-dark] .modus-wc-radial-progress {
  color: var(--modus-wc-color-highlight-blue);
}

/* stylelint-disable-next-line custom-property-pattern */
@property --_value {
  inherits: true;
  initial-value: 0;
  syntax: "<number>";
}
@keyframes grow {
  0% {
    /* stylelint-disable-next-line custom-property-pattern */
    --_value: 0;
  }
  50% {
    /* stylelint-disable-next-line custom-property-pattern */
    --_value: 100;
  }
  100% {
    /* stylelint-disable-next-line custom-property-pattern */
    --_value: 0;
  }
}