soft-components/dist/collection/components/sc-progress/sc-progress.css

Simple soft flexible set of web components

:host {
  /**
    @prop --sc-progress-width:
      Width of the progress bar
      - default: 100%
  */
  --sc-progress-width: 100%;
  /**
    @prop --sc-progress-height:
      Height of the progress bar
      - default: var(--sc-root-spacing, 8px)
  */
  --sc-progress-height: 16px;
  --sc-progress-height: 1rem;
  /**
    @prop --sc-progress-color:
      Color of the inner progress bar
      - default: var(--sc-active-color, #3ab877)
  */
  --sc-progress-color: var(--sc-active-color, #3ab877);
  /**
    @prop --sc-progress-label-color:
      Color of the progress label
      - default: currentColor
  */
  --sc-progress-label-color: currentColor;
  /**
    @prop --sc-progress-border-radius:
      Radius of the progress bar
      - default: var(--sc-border-radius, 8px)
  */
  --sc-progress-border-radius: var(--sc-border-radius, 8px);
  --sc-progress-border-radius: var(--sc-border-radius, 0.5rem);
  /**
    @prop --sc-progress-padding-x:
      Horizontal inner padding
      - default: 4px
  */
  --sc-progress-padding-x: 4px;
  --sc-progress-padding-x: 0.25rem;
  /**
    @prop --sc-progress-padding-y:
      Vertical inner padding
      - default: 4px
  */
  --sc-progress-padding-y: 4px;
  --sc-progress-padding-y: 0.25rem;
  /**
    @prop --sc-progress-animation-duration:
      Animation duration of the indeterminate progress bar
      - default: 2s
  */
  --sc-progress-animation-duration: 2s;
  /**
    @prop --sc-progress-animation-timing-function:
      Animation timing function of the indeterminate progress bar
      - default: var(--sc-animation-timing-function, ease)
  */
  --sc-progress-animation-timing-function: ease-in-out;
  /**
    @prop --sc-progress-circular-size:
      Width and height of the circular progress bar
      - default: 100px
  */
  --sc-progress-circular-size: 100px;
  --sc-progress-circular-size: 6.25rem;
  /**
    @prop --sc-progress-circular-initial-rotate:
      Initial rotation of the progress ring. 0 means starting from right-center
      - default: 90deg
  */
  --sc-progress-circular-initial-rotate: 90deg;
  display: block;
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  border-radius: var(--sc-progress-border-radius);
  width: var(--sc-progress-width);
  height: auto;
  overflow: hidden;
  padding: var(--sc-progress-padding-y) var(--sc-progress-padding-x);
}
:host * {
  box-sizing: border-box;
}
:host .inner {
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  height: var(--sc-progress-height);
  background: var(--sc-progress-color);
  border-radius: var(--sc-progress-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
:host .inner .label {
  width: auto;
  margin: 0 auto;
  font-size: calc(0.8 * var(--sc-progress-height));
  height: 100%;
  display: inline-block;
  color: var(--sc-progress-label-color);
}

@-webkit-keyframes progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110%);
  }
}

@keyframes progress {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110%);
  }
}
:host(.indeterminate) .inner {
  -webkit-animation: progress var(--sc-progress-animation-duration) var(--sc-progress-animation-timing-function) infinite;
          animation: progress var(--sc-progress-animation-duration) var(--sc-progress-animation-timing-function) infinite;
}

:host(.circular) {
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0) calc(var(--sc-highlight-dist-y) * 0) calc(30px * 0) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0) calc(var(--sc-shadow-dist-y) * 0) calc(30px * 0) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0) calc(var(--sc-highlight-dist-y) * 0) calc(1.875rem * 0) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0) calc(var(--sc-shadow-dist-y) * 0) calc(1.875rem * 0) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  border-radius: 50%;
  width: auto;
  height: auto;
  display: inline-block;
}
:host(.circular) .circular-container {
  position: relative;
  width: var(--sc-progress-circular-size);
  height: var(--sc-progress-circular-size);
}
:host(.circular) .label {
  --sc-progress-cicular-label-size: calc(
    var(--sc-progress-circular-size) - 5 * var(--sc-progress-stroke-width)
  );
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--sc-progress-cicular-label-size);
  height: var(--sc-progress-cicular-label-size);
  padding: 8px;
  padding: 0.5rem;
  z-index: 2;
  border-radius: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.25) calc(var(--sc-highlight-dist-y) * 0.25) calc(30px * 0.25) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.25) calc(var(--sc-shadow-dist-y) * 0.25) calc(30px * 0.25) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.25) calc(var(--sc-highlight-dist-y) * 0.25) calc(1.875rem * 0.25) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.25) calc(var(--sc-shadow-dist-y) * 0.25) calc(1.875rem * 0.25) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  overflow: hidden;
  text-overflow: hidden;
  font-size: calc(var(--sc-progress-cicular-label-size) / 5);
  color: var(--sc-progress-label-color);
}
:host(.circular) .progress-ring {
  position: relative;
  z-index: 1;
  width: var(--sc-progress-circular-size);
  height: var(--sc-progress-circular-size);
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.25) calc(var(--sc-highlight-dist-y) * 0.25) calc(30px * 0.25) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.25) calc(var(--sc-shadow-dist-y) * 0.25) calc(30px * 0.25) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.25) calc(var(--sc-highlight-dist-y) * 0.25) calc(1.875rem * 0.25) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.25) calc(var(--sc-shadow-dist-y) * 0.25) calc(1.875rem * 0.25) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  border-radius: 50%;
}
:host(.circular) .progress-ring__circle {
  transition: stroke-dashoffset var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);
  transform: rotate(var(--sc-progress-circular-initial-rotate));
  transform-origin: center center;
  fill: transparent;
  stroke: var(--sc-progress-color);
  stroke-width: var(--sc-progress-stroke-width);
  stroke-dasharray: var(--sc-progress-circular-stroke-dasharray);
  stroke-dashoffset: var(--sc-progress-circular-stroke-dashoffset);
  stroke-linecap: round;
}

:host(.circular.indeterminate) svg {
  -webkit-animation: svg-animation var(--sc-progress-animation-duration) linear infinite;
          animation: svg-animation var(--sc-progress-animation-duration) linear infinite;
}
@-webkit-keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes progress-circle {
  0%, 25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  50%, 75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}
@keyframes progress-circle {
  0%, 25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  50%, 75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}
:host(.circular.indeterminate) .progress-ring__circle {
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  -webkit-animation: progress-circle var(--sc-progress-animation-duration) var(--sc-progress-animation-timing-function) infinite both;
          animation: progress-circle var(--sc-progress-animation-duration) var(--sc-progress-animation-timing-function) infinite both;
}