Progress Bar - Datatables for Laravel [ Datatables for Laravel ](/) [ 1.0.5](https://laravel-datatables.com/release-notes "Click to view release notes") Toggle main menu [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search ⌘ K [ Log in ](/login) [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search docs and demos Type at least 2 characters to search. Demos ### Use Cases - [ Simple Datatable ](https://laravel-datatables.com/demos/use-case-simple) - [ Products Datatable ](https://laravel-datatables.com/demos/use-case-products) - [ Sales Operations ](https://laravel-datatables.com/demos/use-case-sales) ### Features - [ Accessibility ](https://laravel-datatables.com/demos/features-accessibility) - [ Advanced Filtering ](https://laravel-datatables.com/demos/features-advanced-filtering) - [ Aggregate Totals ](https://laravel-datatables.com/demos/features-aggregate-totals) - [ Column Reordering ](https://laravel-datatables.com/demos/features-column-reordering) - [ Custom Controls ](https://laravel-datatables.com/demos/features-custom-controls) - [ Directionality (LTR / RTL) ](https://laravel-datatables.com/demos/features-directionality) - [ Export ](https://laravel-datatables.com/demos/features-export) - [ Frozen Columns ](https://laravel-datatables.com/demos/features-frozen-columns) - [ Frozen Header ](https://laravel-datatables.com/demos/features-frozen) - [ Frozen Header & Columns ](https://laravel-datatables.com/demos/features-frozen-both) - [ Pagination ](https://laravel-datatables.com/demos/features-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/demos/features-responsive-mobile) - [ Row Grouping ](https://laravel-datatables.com/demos/features-row-grouping) - [ Row Selection & Bulk Actions ](https://laravel-datatables.com/demos/features-row-selection-bulk-actions) ### Cell Renderer - [ Action Buttons ](https://laravel-datatables.com/demos/cell-renderer-action-buttons) - [ Avatar ](https://laravel-datatables.com/demos/cell-renderer-avatar) - [ Checkmark ](https://laravel-datatables.com/demos/cell-renderer-checkmark) - [ Color Sample ](https://laravel-datatables.com/demos/cell-renderer-color-sample) - [ Email Link ](https://laravel-datatables.com/demos/cell-renderer-email) - [ External Link ](https://laravel-datatables.com/demos/cell-renderer-external) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/cell-renderer-friendly-timestamp) - [ Image ](https://laravel-datatables.com/demos/cell-renderer-image) - [ Long Text ](https://laravel-datatables.com/demos/cell-renderer-long-text) - [ Phone Link ](https://laravel-datatables.com/demos/cell-renderer-phone-link) - [ Progress Bar ](https://laravel-datatables.com/demos/cell-renderer-progress-bar) - [ Status Badge ](https://laravel-datatables.com/demos/cell-renderer-status-badge) - [ URL Link ](https://laravel-datatables.com/demos/cell-renderer-url) - [ Wire Link ](https://laravel-datatables.com/demos/cell-renderer-wire) ### Value Formatter - [ Compact Number ](https://laravel-datatables.com/demos/value-formatter-compact-number) - [ Currency ](https://laravel-datatables.com/demos/value-formatter-currency) - [ Duration ](https://laravel-datatables.com/demos/value-formatter-duration) - [ Friendly Filesize ](https://laravel-datatables.com/demos/value-formatter-friendly-filesize) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/value-formatter-friendly-timestamp) - [ Locale Timestamp ](https://laravel-datatables.com/demos/value-formatter-locale-timestamp) - [ Number ](https://laravel-datatables.com/demos/value-formatter-number) - [ Percent ](https://laravel-datatables.com/demos/value-formatter-percent) Progress Bar ============ Show a numeric value as an easy-to-scan progress bar. Items per page Manage Columns 10 Current 25 50 100 ​ ### Manage Columns Apply Cancel Loading... ID Active Name SKU Stock Units Sold % of Stock Sold Price Created At Updated At 1 Cumque et ullam #1 SKU-00000001 85 915 92% $487.94 October 9, 2026 3:21 PM 3 weeks ago 2 Nesciunt doloribus voluptatum #2 SKU-00000002 982 18 2% $375.07 October 9, 2026 3:21 PM 3 weeks ago 3 Et ullam dignissimos #3 SKU-00000003 290 710 71% A$485.74 October 9, 2026 3:21 PM 3 weeks ago 4 Exercitationem sapiente nihil #4 SKU-00000004 164 836 84% CA$108.78 October 9, 2026 3:21 PM 3 weeks ago 5 Vel tempore dolores #5 SKU-00000005 860 140 14% CA$211.49 October 9, 2026 3:21 PM 3 weeks ago 6 Qui consequatur sed #6 SKU-00000006 0 1000 100% £422.27 October 9, 2026 3:21 PM 3 weeks ago 7 Sit quae occaecati #7 SKU-00000007 866 134 13% $374.05 October 9, 2026 3:21 PM 3 weeks ago 8 Esse nihil quam #8 SKU-00000008 0 1000 100% £437.97 October 9, 2026 3:21 PM 3 weeks ago 9 Corporis dolorum est #9 SKU-00000009 988 12 1% £144.12 October 9, 2026 3:21 PM 3 weeks ago 10 Ut explicabo quia #10 SKU-00000010 693 307 31% A$364.24 October 9, 2026 3:21 PM 3 weeks ago « Previous Next » 1 - 10 of 1000 1 2 3 4 5 6 7 8 9 10 ... 99 100 - Demo code is available for licensed customers - ### Related Documentation [Progress Bar Cell Renderer Display progress bars within cells using the Progress Bar renderer.](https://laravel-datatables.com/docs/renderer-progress-bar) [Percent Value Formatter Display numeric values as percentages.](https://laravel-datatables.com/docs/formatter-percent) ### Related Demos [Percent Value Formatter Format numbers as percentages according to the specified locale.](https://laravel-datatables.com/demos/value-formatter-percent) © 2026 Copyright (C) [ Morrow IT Consulting & Services ](https://morrow-it.services) [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)