Panely

Basic

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

Striped

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

Animated

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes via CSS3 animations.

Contextual color

Use background utility classes to change the appearance of individual progress bars.

Label

Add labels to your progress bars by placing text within the .progress-bar.

20%
30%
40%
50%
60%
70%
80%

Height

Use predefined modifier classes .progress-{sm|lg} to change progress element height.

Set a height value on the .progress-bar, so if you change that value the outer .progress will automatically resize accordingly.

Multiple

Include multiple progress bars in a progress component if you need.

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

Dashboard

Dashboard 1

Dashboard 2

Dashboard 3

Dashboard 4

Dashboard 5

Dashboard 6

Dashboard 7

Dashboard 8

Email

Criptocurrency

Chatting

Navigation