Progress

Progress.vue

<template>
  <PeachyProgress.Progress :value="progress">
    <PeachyProgress.Label>Progress</PeachyProgress.Label>
  </PeachyProgress.Progress>
</template>

progress.css

.peachy-progress {
  position: relative;
  width: var(--component-width);
  padding-bottom: 1em;
}

.peachy-progress::after,
.peachy-progress::before {
  content: "";
  bottom: 0;
  position: absolute;

  border-radius: 1px;
  height: 0.75em;
  width: 12rem;
}

.peachy-progress::before {
  background-color: var(--border);
}

.peachy-progress::after {
  background-color: var(--brand-color);

  will-change: max-width;
  transition: max-width 0.25s;
}

.peachy-progress__label {
  font-size: 90%;
}

Anatomy

<template>
  <PeachyProgress.Progress>
    <PeachyProgress.Label />
  </PeachyProgress.Progress>
</template>

<script lang="ts" setup>
  import { PeachyProgress } from "typeach";
</script>

Props & Emits

Progress

Props

Name	Default	Type
value		number
min	0	number?
max	100	number?

Styling

CSS Selectors

Follows our CSS classes convention.

Accessibility

Resources: APG Meter Pattern