@zplane-web/craft-licensing

Progress 

<div class="progress">
    <div class="progress__progress" style="--progress: 50%" role="progressbar" aria-valuenow="125" aria-valuemin="0" aria-valuemax="250">
        <span class="progress__label">50%</span>
    </div>
</div>
 
{% set target = target ??? 100 %}
{% set progressCss = min(current / target * 100, 100) | round(2) %}
{% set progressText = min(current / target * 100, 100) | round(0) -%}

<div {{ html_attributes({
  id: id ?? false,
  class: 'progress',
}, attrs ?? {}) }}>
  <div {{ html_attributes({
    class: 'progress__progress',
    style: "--progress: #{progressCss}%",
    role: 'progressbar',
    aria: {
      valuenow: current,
      valuemin: 0,
      valuemax: target,
    },
  }, progressAttrs ?? {}) }}>
    <span {{ html_attributes({
      class: 'progress__label',
    }, progressLabelAttrs ?? {}) }}>
      {{- "#{progressText}%" -}}
    </span>
  </div>
</div>
 
{
  "target": 250,
  "current": 125
}
  • Content: 
    @property --progress {
  inherits: true;
  initial-value: 0;
  syntax: '<length-percentage>';
}

.progress {
  background-color: var(--progress-background-color, var(--color-gray-050));
  border-color: var(--progress-border-color, var(--color-gray-200));
  border-radius: var(--progress-border-radius, 9999px);
  border-style: var(--progress-border-style, solid);
  border-width: var(--progress-border-width, 1px);
  overflow: hidden;
  position: relative;
}

.progress__progress {
  background-color: var(--progress-background-color-elevated, var(--color-gray-200));
  block-size: var(--progress-block-size, 3rem);
  inline-size: var(--progress);
  text-align: center;
}

.progress__label {
  background-color: var(--progress-background-color, var(--color-white));
  border-radius: calc(var(--font-size-small) / 2 + 0.3rem);
  color: var(--progress-color, var(--color-gray-950));
  font-size: var(--progress-font-size, var(--font-size-small));
  font-weight: var(--progress-font-weight, var(--font-weight-bold));
  inset-block-start: 50%;
  inset-inline-start: 50%;
  line-height: 1;
  padding-block: 0.3rem;
  padding-inline: 0.6rem;
  position: absolute;
  transform: translate(-50%, -50%);
}
  • URL: /components/raw/progress/progress.scss
  • Filesystem Path: src/components/2-atoms/progress/progress.scss
  • Size: 1.2 KB

No notes defined.