BarProgress

Overview

Progress is often used as loader. However, it suited very well statistic use cases.

In a second time, there is also CounterProgress, a Progress sub-component where main purpose is to handle the updated progress value display.

Here below are everything you have to know about Astropine’s Progress components.

Default Bar Progress

By default, duration is set to 1000ms, i.e 1sec. Bar Progress will go to 100%.

The component take initially its parent’s width.

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
---

<div class="w-64 p-8 border rounded-sm bg-white">
  <BarProgress />
</div>

Default Counter Progress

By default, duration is set to 1000ms, i.e 1sec. Bar Progress will go to 100%.

The component take initially its parent’s width.

Copied !

---
import CounterProgress from "$components/progress/counter/CounterProgress.astro";
---

<div
  class="w-64 p-8 flex justify-center items-center border rounded-sm bg-white"
>
  <CounterProgress />
</div>

Value Bar Progress

Setting value props will be progress max.

Bar

Counter

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
import CounterProgress from "$components/progress/counter/CounterProgress.astro";
---

<div class="w-64 p-8 border flex flex-col gap-y-4 rounded-sm bg-white">
  <div class="flex items-center gap-x-4">
    <h4>Bar</h4>
    <BarProgress value={84} />
  </div>
  <div class="flex items-center gap-x-4">
    <h4>Counter</h4>
    <CounterProgress value={76} />
  </div>
</div>

Theme Color Bar Progress

To stylize a bit our component, you can apply theme color classes.

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
---

<div
  class="w-full flex flex-col gap-y-4 items-center p-8 border rounded-sm bg-white"
>
  <BarProgress class="h-6" value={50} />
  <BarProgress class="h-6" themeColor="primary" value={92} />
  <BarProgress class="h-6" themeColor="secondary" />
  <BarProgress class="h-6" themeColor="success" value={75} />
  <BarProgress class="h-6" themeColor="danger" value={67} />
  <BarProgress class="h-6" themeColor="info" value={39} />
  <BarProgress class="h-6" themeColor="warning" value={84} />
</div>

Interval Duration Progress

There are two props you will use to manipulate duration. Either you use interval props, either you use duration.

The difference is pretty obvious. By using interval, what you want is setting how progress will be incremented. By using duration, it’s time progress get to max value.

Bar

Counter

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
import CounterProgress from "$components/progress/counter/CounterProgress.astro";
---

<div
  class="w-full flex flex-col gap-y-8 items-center p-8 border rounded-sm bg-white"
>
  <div class="flex flex-col justify-center items-center w-full gap-y-4">
    <h4>Bar</h4>
    <BarProgress interval={250} value={76} />
    <BarProgress duration={4000} value={76} />
    <BarProgress duration={4000} value={22} />
  </div>
  <div class="flex flex-col justify-center items-center">
    <h4>Counter</h4>
    <CounterProgress interval={250} value={76} />
    <CounterProgress duration={4000} value={76} />
    <CounterProgress duration={4000} value={22} />
  </div>
</div>

Custom Class Bar Progress

You don’t want to use theme color classes ? Thanks to tailwind, you can apply some custom classes on your own.

Check the example to see how it’s done.

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
---

<div
  class="w-full flex flex-col gap-y-4 items-center p-8 border rounded-sm bg-white"
>
  <BarProgress class="[&>span]:bg-slate-400" interval={150} value={76} />
  <BarProgress
    class="h-2 rounded-none [&>span]:bg-blue-300"
    duration={1500}
    value={62}
  />
</div>

Track Value Bar Progress

It would be good to get the current progress value ! Don’t worry, I got you.

Simply use Alpine dispatch event @track and capture the value.

See example below.

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
---

<div
  x-data="{ progressValue: 0 }"
  class="w-full flex items-center gap-x-2 p-8 border rounded-sm bg-white"
>
  <BarProgress
    value={84}
    duration="3000"
    @track="progressValue = $event.detail.value;"
  />
  <span x-text="`${progressValue}%`" x-log="progressValue"></span>
</div>

No Animation Bar Progress

About animation, in some cases or simply because you don’t want to, you can get rid of it with noAnimation props.

Copied !

---
import BarProgress from "$components/progress/bar/BarProgress.astro";
---

<div
  x-data="{ progressValue: 0 }"
  class="w-full flex items-center gap-x-2 p-8 border rounded-sm bg-white"
>
  <BarProgress
    value={92}
    @track="progressValue = $event.detail.value;"
    noAnimation
  />
  <span x-text="`${progressValue}%`" x-log="progressValue"></span>
</div>