Information Module

Progress Bars

Visualize the progression of an operation or skill level.
See Examples

Default Progress Bar Large

Brooklyn’s default progress bar comes with 2 predefined sizes, large and small.

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

Customized Progress Bar Large

Make use of HEX, RGB, RGBA and Gradient colors with opacity and angle support, change the border radius to create a different shape or change the alignment of percentage value and description. The given options are making the progress bar very versatile.

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

Design

90%

Development

80%

Marketing

70%

Consulting

60%

DESIGN

62%

DEVELOPMENT

93%

MARKETING

26%

CONSULTING

88%

Design

90%

Development

80%

Marketing

90%

Consulting

60%

Default Progress Bar Small

You can also change the animation speed per progress bar and decide, if the animation of the progress bar starts over again every time the user re-enters the viewport.

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

Customized Progress Bar Small

Absolutely identical in terms of available options just displaying with a smaller bar height.

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

Design

90%

Development

80%

Marketing

70%

Consulting

60%

DESIGN

62%

DEVELOPMENT

93%

MARKETING

26%

CONSULTING

88%

Design

90%

Development

80%

Marketing

90%

Consulting

60%

Thin Progress Bar

Brooklyn’s second progress bar modul is optimized for displaying thin bars paired with an animated percentage label.

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

DESIGN

90%

DEVELOPMENT

80%

MARKETING

70%

CONSULTING

60%

Customized Progress Bar Thin

Use HEX, RGB, RGBA and Gradient colors with opacity and angle support or change the alignment of the bar description. Optionally you are able to switch the position fo the bar description from above to below.

Design

90%

Development

80%

Marketing

70%

Consulting

60%
90%

Design

80%

Development

70%

Marketing

60%

Consulting

Design

72%

Development

51%

Marketing

60%

Consulting

64%
90%

Design

80%

Development

70%

Marketing

60%

Consulting

Use Case Example

As part of a virtual business card.

blog_styles_1

Marcel M.

Design Freak

Marcel M.

Hello, I’m Marcel Designer at Brooklyn Designs.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

PHP Coding

93%

jQuery Coding

95%

Plugin Development

98%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.

Unlock 50+ Premium Demo Websites with One Incredible Offer!

Enjoy Free Add-ons, Ongoing Updates, and a Wealth of Templates – All Included!