---
layout: cypress
title: Elements/Progress
---

<div class="block">
  <progress id="progress" class="progress" value="15" max="100">15%</progress>
</div>

<div class="block">
  <progress id="progress-small" class="progress is-small" value="15" max="100">
    15%
  </progress>
  <progress id="progress-normal" class="progress" value="15" max="100">
    30%
  </progress>
  <progress
    id="progress-medium"
    class="progress is-medium"
    value="15"
    max="100"
  >
    45%
  </progress>
  <progress id="progress-large" class="progress is-large" value="15" max="100">
    60%
  </progress>
</div>

<div class="block">
  {% for color in site.data.colors.justColors %}
  <progress
    id="progress-{{ color }}"
    class="progress is-{{ color }}"
    value="15"
    max="100"
  >
    15%
  </progress>
  <progress
    id="progress-{{ color }}-indeterminate"
    class="progress is-{{ color }}"
    max="100"
  >
    15%
  </progress>
  {% endfor %}
</div>