Loading...

Progress

Basic Progress

Create a progress bar with Bootstrap using .progressand .progress-bar classes. Set the width of the progress bar with inline styles or utility classes to show progress.

Colored Progress

Use colored progress bars in Bootstrap by applying classes like .bg-success or .bg-danger to the .progress-bar for different colors.

Progress With Labels

Display labels on Bootstrap progress bars by adding text inside the <div class="progress-bar">. Use classes like .text-white for text color.

20%
25%
50%
75%
100%
Progress size

Easily adjust the size of progress bars using custom classes. The .progress-xs class represents an extra small progress bar, perfect for compact layouts.

Striped Progress

Create striped progress bars in Bootstrap by adding the .progress-bar-striped class to your <div class="progress-bar">. This adds a striped pattern to the progress bar for a dynamic look.

Animated Striped Progress

Add animation to striped progress bars in Bootstrap by using .progress-bar-animated with .progress-bar-striped. This makes the stripes move, creating a dynamic effect.

Default Circle Progress Bar

Use the custom circle progress bar by adding a .circular-progress class. Inside, use an <svg> element with <circle> elements for the background and foreground to visually display progress.

70%
Circle Size Progress

Use size classes like .circular-* to adjust the circle progress bar size in Bootstrap. Apply it to .circular-progress for a larger display.

40%
40%
40%
40%
40%
Circle Color Progress

Change the color of your circle progress bar using the .circular-progress-* class. Apply this class to .circular-progress for a color scheme.

10%
70%
40%
22%
90%
40%
50%

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.