PHPackages                             mrshanebarron/progress - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mrshanebarron/progress

ActiveLibrary[Utility & Helpers](/categories/utility)

mrshanebarron/progress
======================

Progress bar component for Laravel - supports Livewire and Vue

v1.0.4(4mo ago)014MITVuePHP ^8.1

Since Dec 14Pushed 4mo agoCompare

[ Source](https://github.com/mrshanebarron/progress)[ Packagist](https://packagist.org/packages/mrshanebarron/progress)[ RSS](/packages/mrshanebarron-progress/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (6)Used By (0)

Progress
========

[](#progress)

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

Installation
------------

[](#installation)

```
composer require mrshanebarron/progress
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```

```

### With Label

[](#with-label)

```

    Upload Progress

```

### Different Colors

[](#different-colors)

```

```

### Different Sizes

[](#different-sizes)

```

```

### Striped & Animated

[](#striped--animated)

```

```

### Custom Max Value

[](#custom-max-value)

```

    30 of 50 items

```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`value`number`0`Current progress value`max`number`100`Maximum value`size`string`'md'`Size: `sm`, `md`, `lg`, `xl``color`string`'blue'`Color theme`show-label`boolean`false`Show percentage label`striped`boolean`false`Add stripe pattern`animated`boolean`false`Animate stripesVue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

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

### Basic Usage

[](#basic-usage-1)

```

```

### With Label

[](#with-label-1)

```

    Upload Progress

import { ref } from 'vue';
const progress = ref(45);

```

### Colors

[](#colors)

```

```

### Sizes

[](#sizes)

```

```

### Striped Progress

[](#striped-progress)

```

```

### File Upload Example

[](#file-upload-example)

```

      {{ file.name }}
      {{ formatBytes(file.size) }}

```

### Multi-Step Progress

[](#multi-step-progress)

```

    Step {{ currentStep }} of {{ totalSteps }}

const currentStep = ref(2);
const totalSteps = 5;

```

### Vue Props

[](#vue-props)

PropTypeDefaultDescription`value`Number`0`Current value`max`Number`100`Maximum value`size`String`'md'`Height: `sm`, `md`, `lg`, `xl``color`String`'blue'`Color: `blue`, `green`, `red`, `yellow`, `purple`, `gray``showLabel`Boolean`false`Display percentage`striped`Boolean`false`Stripe pattern overlay`animated`Boolean`false`Animate stripe movement### Slots

[](#slots)

SlotDescriptiondefaultLabel text (left side)Size Reference
--------------

[](#size-reference)

SizeHeight`sm`4px`md`8px`lg`16px`xl`24pxColor Options
-------------

[](#color-options)

ColorClass`blue`bg-blue-600`green`bg-green-600`red`bg-red-600`yellow`bg-yellow-500`purple`bg-purple-600`gray`bg-gray-600Accessibility
-------------

[](#accessibility)

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

Requirements
------------

[](#requirements)

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

License
-------

[](#license)

MIT License

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance74

Regular maintenance activity

Popularity6

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

5

Last Release

148d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a38dc9b4ccc180ee3e9df8879f8747ea9dbf36812c6546827fe504fa8993eb8?d=identicon)[mrshanebarron](/maintainers/mrshanebarron)

---

Tags

laravellivewireloadingprogressvueprogress bar

### Embed Badge

![Health badge](/badges/mrshanebarron-progress/health.svg)

```
[![Health](https://phpackages.com/badges/mrshanebarron-progress/health.svg)](https://phpackages.com/packages/mrshanebarron-progress)
```

###  Alternatives

[ijpatricio/mingle

Use Vue and React in Laravel Livewire Applications.

43445.4k2](/packages/ijpatricio-mingle)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[mischasigtermans/laravel-altitude

Claude Code agents for the TALL stack, powered by Laravel Boost

1139.2k](/packages/mischasigtermans-laravel-altitude)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)