Progress bar - Greenshift

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

Progress bar has also Circle style

8.7

This block has Dynamic fields to retrieve value from meta fields (requires Query addon)

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>Progress bar has also Circle style</p>

<div id="gspb_container-id-gsbp-cec851b2-0034" class="gspb_container gspb_container-gsbp-cec851b2-0034 wp-block-greenshift-blocks-container">
<div class="wp-block-greenshift-blocks-progressbar gs-progressbar gs-progressbar-wrapper gspb_bar-id-gsbp-ca062a4d-e0d3" style="padding-top:10px;padding-bottom:10px;margin-top:0;margin-bottom:0"><div class="gs-progressbar-wrapper"><div class="gspb-progressbar_circle"><svg viewBox="0 0 36 36"><path id="ld-gsbp-ca062a4d-e0d3" d="M18 2a16 16 0 010 32 16 16 0 010-32" style="stroke-dasharray:87.3, 100" clip-path="url(#clip-gsbp-ca062a4d-e0d3)"></path><clipPath id="clip-gsbp-ca062a4d-e0d3"><use xlink:href="#ld-gsbp-ca062a4d-e0d3"></use></clipPath></svg><div class="gspb-progressbar_circle_value">8.7</div></div></div></div>
</div>

<div id="gspb_infoBox-id-gsbp-0e632090-5d44" class="gspb_infoBox gspb_infoBox-id-gsbp-0e632090-5d44 wp-block-greenshift-blocks-infobox"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text">
<p>This block has Dynamic fields to retrieve value from meta fields (requires Query addon)</p>
</div></div></div>

design