Progressbar

Examples and instructions on how to add colorful progressbars on your website.

Line

Call the useProgressbar() hook on the top of component to enable progress functionality.

Available color options:

primary, aqua, green, leaf, navy, orange, pink, purple, red, violet, yellow, fuchsia, sky, grape, soft-primary, soft-aqua, soft-green, soft-leaf, soft-navy, soft-orange, soft-pink, soft-purple, soft-red, soft-violet, soft-yellow, soft-fuchsia, soft-sky, soft-grape

Marketing
Strategy
Development
Stabilization

Marketing
Strategy
Development
Stabilization

View example's code

<ul className="progress-list">
<li>
  <p>Marketing</p>
  <div className="progressbar line blue" data-value="100" />
</li>
<li>
  <p>Strategy</p>
  <div className="progressbar line green" data-value="80" />
</li>
<li>
  <p>Development</p>
  <div className="progressbar line red" data-value="85" />
</li>
<li>
  <p>Stabilization</p>
  <div className="progressbar line yellow" data-value="75" />
</li>
</ul>

Semi Circle

Available color options:

View example's code

<div className="progressbar semi-circle blue" data-value="40" />

<div className="progressbar semi-circle green" data-value="80" />

<div className="progressbar semi-circle soft-red" data-value="65" />

<div className="progressbar semi-circle soft-yellow" data-value="45" />

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Sandbox

Contact Info

Learn More

Follow Us

Your Cart

Nike Air Sneakers

Colorful Sneakers

Polaroid Camera

Progressbar

Line

Semi Circle

Think unique and be creative. Make a difference with Sandbox.

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Progressbar

Line

Semi Circle

Think unique and be creative. Make a difference with Sandbox.