Current Snippets

Contact InkTide

info@inktidedesign.com

© 2025 InkTide Design

Progress Bars

Visual indicators of progress

Home

/

Snippets

/

Components

/

Progress Bars

Default Progress Bars

Use .progress and .pt-height-(height) to set up the bar and its height. Inside, use .progress-bar, .pt-bg-(color), and .pt-width-(width) to style and size the progress indicator.

Showcase

HTML/CSS

1

Rounded Progress Bars

Use .pt-round-(roundness) to soften the corners of the progress bar.

Showcase

HTML/CSS

1

Progress Bar Height

Use .pt-height-(height) to adjust the height of the progress bar.

Showcase

HTML/CSS

1

Mixed Progress Bars

Use multiple .progress-bar elements inside a single .progress container to display different progress stages.

Showcase

HTML/CSS

1

Progress Bar Description

Add text or other content above the bar as a title or description for the progress.

Showcase

HTML/CSS

45%

Deadline

Project Completion: 70%

1

Progress Bar Text

Place text inside the .progress-bar to display progress information within the bar itself.

Showcase

HTML/CSS
87%
Deadline
Project Completion: 70%

1

Gradient Progress Bars

Use .pt-bg-gradient-(gradient color) to style the bar with a gradient color.

Showcase

HTML/CSS

1

Textured Progress Bars

Use .pt-progress-texture-(texture number) along with .pt-bg-(color) to add a textured background to the progress bar.

Showcase

HTML/CSS

1

Vertical Progress Bars

Use .pt-progress-vertical to switch the bar orientation. Adjust sizing with .pt-height-(height) and .pt-width-(width), and control progress using .pt-height-(height).

Showcase

HTML/CSS

1