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" />

Comenzar with Innova Hub.

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

Contáctanos

Innova Hub

Contáctanos

Más información

Síguenos

Your Cart

Nike Air Sneakers

Colorful Sneakers

Polaroid Camera

Progressbar

Line

Semi Circle

Comenzar with Innova Hub.

PÁGINAS DE PROYECTOS

PROYECTOS INDIVIDUALES

Uso

Guía de Estilo

Elementos

Progressbar

Line

Semi Circle

Comenzar with Innova Hub.