@e-fellows/website-2022

Vorschrittsanzeige 

<div class="progress">
    <div class="progress__progress" style="width: 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: "width: #{progressCss}%",
    role: 'progressbar',
    aria: {
      valuenow: current,
      valuemin: 0,
      valuemax: target,
    },
  }) }}>
    <span class="progress__label">
      {{- "#{progressText}%" -}}
    </span>
  </div>
</div>
 
{
  "target": 250,
  "current": 125
}
  • Content: 
    :root {
  --progress-height: 3rem;
  --progress-color: var(--color-midnight);
  --progress-font-size: 1.4rem;
  --progress-background-color: var(--color-cyan-light);
  --progress-border-color: var(--color-cyan-light);
  --progress-border-width: 1px;
}

.progress {
  border: var(--progress-border-width) solid var(--progress-border-color);
  border-radius: calc(var(--progress-height) / 2);
  overflow: hidden;
  position: relative;
}

.progress__progress {
  background-color: var(--progress-background-color);
  block-size: var(--progress-height);
  text-align: center;
}

.progress__label {
  color: var(--progress-color);
  font-size: var(--progress-font-size);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  list-style: 1;
  position: absolute;
  transform: translate(-50%, -50%);
}
  • URL: /components/raw/progress/progress.scss
  • Filesystem Path: src/components/1-atoms/progress/progress.scss
  • Size: 796 Bytes

No notes defined.