Progress bar

<!-- wp:paragraph -->
<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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Example</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/progressbar {"title":"Price","id":"gsbp-cc308320-7684","label":"50%"} -->
<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>
<!-- /wp:greenshift-blocks/progressbar -->

<!-- wp:greenshift-blocks/progressbar {"title":"Functionality","id":"gsbp-576a62e0-a7f1","label":"89%","progress":89} -->
<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>
<!-- /wp:greenshift-blocks/progressbar -->

<!-- wp:greenshift-blocks/progressbar {"title":"Support","id":"gsbp-49283b6b-358c","label":"75%","progress":75} -->
<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>
<!-- /wp:greenshift-blocks/progressbar -->

<!-- wp:paragraph -->
<p>You can change also design</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/progressbar {"title":"Support","id":"gsbp-f95f69a9-51a1","label":"Good","progress":75,"progressheight":[17,null,null,null],"progresslinegradient":"linear-gradient(87deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"} -->
<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>
<!-- /wp:greenshift-blocks/progressbar -->

<!-- wp:paragraph -->
<p>Progress bar has also Circle style</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-cec851b2-0034","flexbox":{"type":"flexbox","flexDirection":["row"],"marginRight":[10],"marginBottom":[15]}} -->
<div id="gspb_container-id-gsbp-cec851b2-0034" class="gspb_container gspb_container-gsbp-cec851b2-0034 wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/progressbar {"id":"gsbp-ca062a4d-e0d3","progress":8.7,"maxvalue":10,"fontsize":[30],"circleSize":[100],"progressbg":"#f6f8fe","typebar":"circle"} -->
<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>
<!-- /wp:greenshift-blocks/progressbar --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-0e632090-5d44"} -->
<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"><!-- wp:paragraph -->
<p>This block has Dynamic fields to retrieve value from meta fields (requires Query addon)</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->