Logo
avatar
Ninfa Monaldo

Web Developer

  • Dashboard
  • dashboardnew
    • Ecommerce
    • Project
  • apps
    • Calendar
    • Profile Page
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • Api
    • Ticket
      • Ticket
      • Ticket Details
    • Emails Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • Bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • Widgets
  • Component
  • Ui Kits
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avatar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • Advanced UI12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
  • Icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • Misc
  • Map & Charts
  • Map & Charts
    • Google Maps
    • Leaflet map
  • Chart
    • Chart js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • Table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • Forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • Ready to use4
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • Auth Pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • Error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • Other pages
    • Blank
    • Maintenance
    • Landing Pages
    • Coming Soon
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • Document
  • Support

Progress

  • Ui Kits
  • Progress
Progress Bars Basic
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%
<ProgressBar className="w-100" now={bar.value} variant="primary" label={12.5%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="secondary" label={25%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="success" label={37.5%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="danger" label={50%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="warning" label={62.5%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="info" label={75%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="light" label={82.5%} visuallyHidden/>

<ProgressBar className="w-100" now={bar.value} variant="dark" label={95%} visuallyHidden/>
Progress Bars Light With Text
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%
<ProgressBar  now={12.5} variant="light-primary" label="12.5%"  className="w-100"/>
<ProgressBar  now={25} variant="light-secondary" label="25%"  className="w-100"/>
<ProgressBar  now={37.5} variant="light-success" label="37.5%"  className="w-100"/>
<ProgressBar  now={50} variant="light-danger" label="50%"  className="w-100"/>
<ProgressBar  now={62.5} variant="light-warning" label="62.5%"  className="w-100"/>
<ProgressBar  now={75} variant="light-info" label="75%"  className="w-100"/>
<ProgressBar  now={82.5} variant="light-light" label="82.5%"  className="w-100"/>
<ProgressBar  now={95} variant="light-dark" label="95%"  className="w-100"/>
Striped Progress With Animation
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%
<ProgressBar now={12.5}variant="primary" stripedanimated
label="12.5%"
  className="w-100"
/>
<ProgressBar now={25}variant="secondary" stripedanimated
label="25%"
  className="w-100"
/>
<ProgressBar now={37.5}variant="success" stripedanimated
label="37.5%"
  className="w-100"
/>
<ProgressBar now={50}variant="danger" stripedanimated
label="50%"
  className="w-100"
/>
<ProgressBar now={62.5}variant="warning" stripedanimated
label="62.5%"
  className="w-100"
/>
<ProgressBar now={75}variant="info" stripedanimated
label="75%"
  className="w-100"
/>
<ProgressBar now={82.5}variant="light" stripedanimated
label="82.5%"
  className="w-100"
/>
<ProgressBar now={95}variant="dark" stripedanimated
label="95%"
  className="w-100"
/>
Progress Sizes
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%

<ProgressBar  now={12.5} variant="primary" label="12.5%" className="h-5"/>

<ProgressBar  now={25} variant="secondary" label="25%" className="h-6"/>

<ProgressBar  now={37.5} variant="success" label="37.5%" className="h-7"/>

<ProgressBar  now={50} variant="danger" label="50%" className="h-8"/>

<ProgressBar  now={62.5} variant="warning" label="62.5%" className="h-9"/>

<ProgressBar  now={75} variant="info" label="75%" className="h-10"/>

<ProgressBar  now={82.5} variant="light" label="82.5%" className="h-11"/>

<ProgressBar  now={95} variant="dark" label="95%" className="h-12"/>
The Real Time Example
Loading data...
100%
75% Processing
75%
52% Updating..
1 Min
52%
Deleting data (85% remain)
1 Min left
15%

<ProgressBar
  now={100}
  variant="primary"
  label="100%"
  className="h-5"
/>

<ProgressBar
  now={75}
  variant="secondary"
  label="75%"
  className="h-5"
/>

<ProgressBar
  now={52}
  variant="success"
  label="52%"
  className="h-5"
/>

<ProgressBar
  now={15}
  variant="danger"
  label="15%"
  className="h-5"
/>

© 2025 ki-admin. All rights reserved 💖 V1.0.0

Need Help