Progress Bar — Vue

---
import ProgressBar from '../components/astro/ProgressBar.astro';
---

<ProgressBar value={60} max={100} showLabel />

<!-- Rizzo CSS. BEM: progress, progress__track, progress__bar, progress__label. -->
<div class="progress progress--primary progress--md" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Progress">
  <div class="progress__track">
    <div class="progress__bar" style="width: 60%;"></div>
  </div>
  <span class="progress__label" aria-hidden="true">60%</span>
</div>

<script>
  import { ProgressBar } from '$lib/rizzo';
</script>

<ProgressBar value={60} max={100} showLabel />

<script setup>
import ProgressBar from '@/components/rizzo/ProgressBar.vue';
</script>

<template>
  <ProgressBar :value="60" :max="100" show-label />
</template>

import { ProgressBar } from './components/react';

<ProgressBar value={60} max={100} showLabel />