Progress

A progress bar component for Laravel applications. Supports multiple colors, sizes, labels, and animated stripes. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/progress

Livewire Usage

Basic Usage

<livewire:sb-progress :value="75" />

With Label

<livewire:sb-progress :value="65" :show-label="true">
    Upload Progress
</livewire:sb-progress>

Different Colors

<livewire:sb-progress :value="80" color="blue" />
<livewire:sb-progress :value="60" color="green" />
<livewire:sb-progress :value="40" color="red" />
<livewire:sb-progress :value="50" color="yellow" />
<livewire:sb-progress :value="70" color="purple" />

Different Sizes

<livewire:sb-progress :value="75" size="sm" />
<livewire:sb-progress :value="75" size="md" />
<livewire:sb-progress :value="75" size="lg" />
<livewire:sb-progress :value="75" size="xl" />

Striped & Animated

<livewire:sb-progress :value="50" :striped="true" />
<livewire:sb-progress :value="50" :striped="true" :animated="true" />

Custom Max Value

<livewire:sb-progress :value="30" :max="50" :show-label="true">
    30 of 50 items
</livewire:sb-progress>

Livewire Props

Vue 3 Usage

Setup

import { SbProgress } from './vendor/sb-progress';
app.component('SbProgress', SbProgress);

Basic Usage

<template>
  <SbProgress :value="75" />
</template>

With Label

<template>
  <SbProgress :value="progress" :show-label="true">
    Upload Progress
  </SbProgress>
</template>

<script setup>
import { ref } from 'vue';
const progress = ref(45);
</script>

Colors

<template>
  <SbProgress :value="80" color="blue" />
  <SbProgress :value="60" color="green" />
  <SbProgress :value="40" color="red" />
  <SbProgress :value="50" color="yellow" />
  <SbProgress :value="70" color="purple" />
  <SbProgress :value="30" color="gray" />
</template>

Sizes

<template>
  <SbProgress :value="75" size="sm" />  <!-- 4px height -->
  <SbProgress :value="75" size="md" />  <!-- 8px height -->
  <SbProgress :value="75" size="lg" />  <!-- 16px height -->
  <SbProgress :value="75" size="xl" />  <!-- 24px height -->
</template>

Striped Progress

<template>
  <!-- Static stripes -->
  <SbProgress :value="50" striped />

  <!-- Animated stripes -->
  <SbProgress :value="50" striped animated />
</template>

File Upload Example

<template>
  <div class="space-y-2">
    <div class="flex justify-between text-sm">
      <span>{{ file.name }}</span>
      <span>{{ formatBytes(file.size) }}</span>
    </div>
    <SbProgress
      :value="uploadProgress"
      :color="uploadProgress === 100 ? 'green' : 'blue'"
      striped
      :animated="uploadProgress < 100"
    />
  </div>
</template>

Multi-Step Progress

<template>
  <SbProgress
    :value="currentStep"
    :max="totalSteps"
    :show-label="true"
    color="purple"
    size="lg"
  >
    Step {{ currentStep }} of {{ totalSteps }}
  </SbProgress>
</template>

<script setup>
const currentStep = ref(2);
const totalSteps = 5;
</script>

Vue Props

Slots

Size Reference

Color Options

Accessibility

• role="progressbar" attribute
• aria-valuenow, aria-valuemin, aria-valuemax
• Percentage label for screen readers

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License