### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Progress

### Progress Bars

Huro provides a very versatile progress bar component that can be used almost anywhere, across a wide variety of layouts. 3 size modifier classes are available: `.is-small`, `.is-smaller` and `.is-tiny`.

65% 90% 31% 15%

          <progress class="progress is-primary is-tiny" value="65" max="100">65%</progress>
          <progress class="progress is-primary is-smaller" value="90" max="100">90%</progress>
          <progress class="progress is-primary is-small" value="31" max="100">31%</progress>
          <progress class="progress is-primary" value="15" max="100">15%</progress>

### Progress Bars

Huro progress bars can also have different colors. Available modifier classes are: `.is-primary`, `.is-success` `.is-info`, `.is-warning`, and `.is-danger`.

70% 55% 45% 60% 38%

          <progress class="progress is-primary is-tiny" value="70" max="100">70%</progress>
          <progress class="progress is-success is-tiny" value="55" max="100">55%</progress>
          <progress class="progress is-info is-tiny" value="45" max="100">45%</progress>
          <progress class="progress is-warning is-tiny" value="60" max="100">60%</progress>
          <progress class="progress is-danger is-tiny" value="38" max="100">38%</progress>

### Indeterminate Progress

In some particular use cases, you might want to show an undetermined progress. If you want your progress bars to show an undetermined state, you just need to omit the `value=""` attribute. The CSS will take care of the rest.

70% 55% 45% 60% 38%

          <progress class="progress is-primary is-tiny"  max="100">70%</progress>
          <progress class="progress is-success is-tiny" max="100">55%</progress>
          <progress class="progress is-info is-tiny" max="100">45%</progress>
          <progress class="progress is-warning is-tiny" max="100">60%</progress>
          <progress class="progress is-danger is-tiny" max="100">38%</progress>