Progress bar

Blog Staff

May 4, 2022

It’s simple block but it can be very useful in some scenarios, for example, if you want to show review scores or anything related for progress bar design

Example

Price

50%

Functionality

89%

Support

75%

You can change also design

Support

Good

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>It's simple block but it can be very useful in some scenarios, for example, if you want to show review scores or anything related for progress bar design</p>

<p>Example</p>

<div class="wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-cc308320-7684" style="padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:0"><div class="gs-progressbar-wrapper"><div class="gs-progressbar__labels" style="display:flex;justify-content:space-between;margin-bottom:5px"><div class="gs-progressbar__title" style="color:#111111"><span>Price</span></div><div class="gs-progressbar__label" style="color:#777777"><span>50%</span></div></div><div class="gs-progressbar__progress" style="background-color:#e0e3f0;border-radius:8px"><div class="gs-progressbar__bar" style="height:100%;width:50%;border-radius:8px"></div></div></div></div>

<div class="wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-576a62e0-a7f1" style="padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:0"><div class="gs-progressbar-wrapper"><div class="gs-progressbar__labels" style="display:flex;justify-content:space-between;margin-bottom:5px"><div class="gs-progressbar__title" style="color:#111111"><span>Functionality</span></div><div class="gs-progressbar__label" style="color:#777777"><span>89%</span></div></div><div class="gs-progressbar__progress" style="background-color:#e0e3f0;border-radius:8px"><div class="gs-progressbar__bar" style="height:100%;width:89%;border-radius:8px"></div></div></div></div>

<div class="wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-49283b6b-358c" style="padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:0"><div class="gs-progressbar-wrapper"><div class="gs-progressbar__labels" style="display:flex;justify-content:space-between;margin-bottom:5px"><div class="gs-progressbar__title" style="color:#111111"><span>Support</span></div><div class="gs-progressbar__label" style="color:#777777"><span>75%</span></div></div><div class="gs-progressbar__progress" style="background-color:#e0e3f0;border-radius:8px"><div class="gs-progressbar__bar" style="height:100%;width:75%;border-radius:8px"></div></div></div></div>

<p>You can change also design</p>

<div class="wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-f95f69a9-51a1" style="padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:0"><div class="gs-progressbar-wrapper"><div class="gs-progressbar__labels" style="display:flex;justify-content:space-between;margin-bottom:5px"><div class="gs-progressbar__title" style="color:#111111"><span>Support</span></div><div class="gs-progressbar__label" style="color:#777777"><span>Good</span></div></div><div class="gs-progressbar__progress" style="background-color:#e0e3f0;border-radius:8px"><div class="gs-progressbar__bar" style="height:100%;width:75%;border-radius:8px"></div></div></div></div>

<p></p>