{"id":804,"date":"2026-09-24T12:08:32","date_gmt":"2026-09-24T12:08:32","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?page_id=804"},"modified":"2026-10-11T06:53:27","modified_gmt":"2026-10-11T06:53:27","slug":"progress-bar","status":"publish","type":"page","link":"https:\/\/shapekode.com\/product\/shapeblock\/progress-bar\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"<style id=\"shapeblock-block-css-5-inline-css\">\n.shapeblock-layout-row-mum3s8 { justify-content:center;align-content:stretch;flex-wrap:wrap;gap:20px;padding-top:120px;padding-right:16px;padding-bottom:120px;padding-left:16px;background-color:#5933ff;background-image:url(https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/banner-shape.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:scroll;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-mum3s8 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-elv1eg { flex:0 1 calc(700px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(700px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-elv1eg > .shapeblock-column__inner { display:flex;flex-direction:column;align-items:center; }.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading .shapeblock-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#00000000;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#ffffff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button:hover { color:#ffffff;border-style:solid;border-color:#0067ff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-4-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-5-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-mum3s8 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-elv1eg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h1 style=\"margin-bottom:8px\" class=\"has-link-color wp-elements-1 wp-block-post-title has-text-color has-base-color has-xx-large-font-size has-text-align-center\">Progress Bar<\/h1> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-130a5c wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h4 class=\"shapeblock-title\">Build your Progress Bar With ShapeBlock<\/h4>\t<\/div> <\/div> <p class=\"has-text-align-center has-base-color has-text-color has-link-color wp-elements-2 wp-block-paragraph\" style=\"margin-top:20px\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-211891db wp-block-group-is-layout-flex\" style=\"padding-top:14px\"> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-5240d5 wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-primary\" target=\"_self\"> <span class=\"shapeblock-button-text\">Get Started Now<\/span> <\/a> <\/div> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-31oq4y wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-outline\" target=\"_blank\" rel=\"noopener\"> <span class=\"shapeblock-button-text\">Documentation  <\/span> <\/a> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-11-inline-css\">\n.shapeblock-layout-row-p2b8tg { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:100px;padding-bottom:100px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-p2b8tg { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-p2b8tg { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-p2b8tg > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-p2b8tg > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-col-qy8rd7 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:20px; }.shapeblock-progress-bar-block-wrap.shapeblock-pb-u169oh .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-u169oh .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-6-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-4xmoba .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-4xmoba .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-7-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-6pikqn .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-6pikqn .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-8-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2uzps5 .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2uzps5 .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-9-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-10-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-11-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-p2b8tg is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ay9qsp wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-8c72e5 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Progress Bar Style 1<\/h2>\t<\/div> <\/div> <p class=\"wp-block-paragraph\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-qy8rd7 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-u169oh wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Web Designer<\/p> <span class=\"shapeblock-pb-percent\">50%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 50%\" data-width=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-4xmoba wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">WordPress<\/p> <span class=\"shapeblock-pb-percent\">80%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 80%\" data-width=\"80\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-6pikqn wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Graphic Design<\/p> <span class=\"shapeblock-pb-percent\">70%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 70%\" data-width=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-2uzps5 wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">UI\/UX Design<\/p> <span class=\"shapeblock-pb-percent\">60%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 60%\" data-width=\"60\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-17-inline-css\">\n.shapeblock-layout-row-k95j33 { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:100px;padding-bottom:100px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-k95j33 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-k95j33 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-k95j33 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-k95j33 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-col-nstccs > .shapeblock-column__inner { display:flex;flex-direction:column;gap:14px; }.shapeblock-progress-bar-block-wrap.shapeblock-pb-yguijy .shapeblock-progress { border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yguijy .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yguijy .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-12-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-n1iykq .shapeblock-progress { border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-n1iykq .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-n1iykq .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-13-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-shhptb .shapeblock-progress { border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-shhptb .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-shhptb .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-14-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-c4em22 .shapeblock-progress { border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-c4em22 .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-c4em22 .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-15-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-16-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-17-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-k95j33 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-phrn18 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-sa2tmu wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Progress Bar Style 2 (Rounded)<\/h2>\t<\/div> <\/div> <p class=\"wp-block-paragraph\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-nstccs wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-yguijy wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Web Designer<\/p> <span class=\"shapeblock-pb-percent\">50%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 50%\" data-width=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-n1iykq wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">WordPress<\/p> <span class=\"shapeblock-pb-percent\">80%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 80%\" data-width=\"80\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-shhptb wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Graphic Design<\/p> <span class=\"shapeblock-pb-percent\">70%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 70%\" data-width=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-c4em22 wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">UI\/UX Design<\/p> <span class=\"shapeblock-pb-percent\">60%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 60%\" data-width=\"60\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-23-inline-css\">\n.shapeblock-layout-row-upy4qd { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:100px;padding-bottom:100px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-upy4qd { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-upy4qd { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-upy4qd > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-upy4qd > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-col-t3jz2x > .shapeblock-column__inner { display:flex;flex-direction:column;gap:14px; }.shapeblock-progress-bar-block-wrap.shapeblock-pb-vsge6c .shapeblock-progress { height:25px;border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-vsge6c .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-vsge6c .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-18-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-8texrc .shapeblock-progress { height:25px;border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-8texrc .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-8texrc .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-19-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-dw95om .shapeblock-progress { height:25px;border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-dw95om .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-dw95om .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-20-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-ggbe3q .shapeblock-progress { height:25px;border-radius:100px; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-ggbe3q .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-ggbe3q .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n\/*# sourceURL=shapeblock-block-css-21-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-22-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-23-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-upy4qd is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-gif85h wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-6al6ha wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Progress Bar Style 3 (Fat Rounded)<\/h2>\t<\/div> <\/div> <p class=\"wp-block-paragraph\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-t3jz2x wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-vsge6c wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Web Designer<\/p> <span class=\"shapeblock-pb-percent\">50%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 50%\" data-width=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-8texrc wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">WordPress<\/p> <span class=\"shapeblock-pb-percent\">80%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 80%\" data-width=\"80\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-dw95om wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">Graphic Design<\/p> <span class=\"shapeblock-pb-percent\">70%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 70%\" data-width=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-ggbe3q wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style1\"> <div class=\"shapeblock-progress-top\"> <p class=\"shapeblock-pb-title\">UI\/UX Design<\/p> <span class=\"shapeblock-pb-percent\">60%<\/span> <\/div> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 60%\" data-width=\"60\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-29-inline-css\">\n.shapeblock-layout-row-x4zrwc { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:100px;padding-bottom:100px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-x4zrwc { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-x4zrwc { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-x4zrwc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-x4zrwc > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-col-yc0x3o > .shapeblock-column__inner { display:flex;flex-direction:column;gap:20px; }.shapeblock-progress-bar-block-wrap.shapeblock-pb-9pg7k5 .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%); }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-9pg7k5 .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-9pg7k5 .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-9pg7k5 .shapeblock-pb-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-24-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-u3oxes .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%); }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-u3oxes .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-u3oxes .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-u3oxes .shapeblock-pb-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-25-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yjkq7q .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%); }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yjkq7q .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yjkq7q .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-yjkq7q .shapeblock-pb-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-26-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-rvfdvf .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%); }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-rvfdvf .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-rvfdvf .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-rvfdvf .shapeblock-pb-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-27-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-28-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-29-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-x4zrwc is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-dvxx3i wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-vk8tc0 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Progress Bar Style 4 (Gradient)<\/h2>\t<\/div> <\/div> <p class=\"wp-block-paragraph\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yc0x3o wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-9pg7k5 wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">Web Designer<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 50%\" data-width=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">50%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-u3oxes wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">WordPress<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 80%\" data-width=\"80\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">80%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-yjkq7q wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">Graphic Design<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 70%\" data-width=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">70%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-rvfdvf wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">UI\/UX Design<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 60%\" data-width=\"60\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">60%<\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-35-inline-css\">\n.shapeblock-layout-row-7bpu4i { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:100px;padding-bottom:100px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-7bpu4i { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-7bpu4i { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-7bpu4i > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-7bpu4i > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-col-qwesez > .shapeblock-column__inner { display:flex;flex-direction:column;gap:20px; }.shapeblock-progress-bar-block-wrap.shapeblock-pb-j7j1hw .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%);height:25px;border-radius:0; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-j7j1hw .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-j7j1hw .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-j7j1hw .shapeblock-pb-title { font-size:14px;color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-30-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-p0pdgr .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%);height:25px;border-radius:0; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-p0pdgr .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-p0pdgr .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-p0pdgr .shapeblock-pb-title { font-size:14px;color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-31-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-apu0dl .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%);height:25px;border-radius:0; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-apu0dl .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-apu0dl .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-apu0dl .shapeblock-pb-title { font-size:14px;color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-32-inline-css *\/\n\n\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2re8ze .shapeblock-progress { background:linear-gradient(135deg,rgb(89,51,255) 4%,rgb(235,224,245) 97%);height:25px;border-radius:0; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2re8ze .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2re8ze .shapeblock-progress-style2 .shapeblock-progress .shapeblock-progress-fill { background:#5933ff; }\n.shapeblock-progress-bar-block-wrap.shapeblock-pb-2re8ze .shapeblock-pb-title { font-size:14px;color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-33-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-34-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-35-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-7bpu4i is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-1bcq5y wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-k53ui9 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Progress Bar Style 5 (Square)<\/h2>\t<\/div> <\/div> <p class=\"wp-block-paragraph\">Show progress clearly with a clean and customizable Progress Bar block by ShapeBlock for Gutenberg. Display skills, project progress, statistics, or completion levels in a simple and engaging visual layout.<\/p> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-qwesez wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-j7j1hw wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">Web Designer<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 50%\" data-width=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">50%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-p0pdgr wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">WordPress<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 80%\" data-width=\"80\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">80%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-apu0dl wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">Graphic Design<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 70%\" data-width=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">70%<\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-progress-bar-block-wrap shapeblock-pb-2re8ze wp-block-shapeblock-progress\"> <div class=\"shapeblock-progress-bar shapeblock-progress-style2\"> <div class=\"shapeblock-progress-style2\"> <p class=\"shapeblock-pb-title\">UI\/UX Design<\/p> <div class=\"shapeblock-progress\"> <div class=\"shapeblock-progress-fill\" role=\"progressbar\" style=\"width: 60%\" data-width=\"60\" aria-valuenow=\"60\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div> <span class=\"shapeblock-pb-percent\">60%<\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_blockode_hide_title":true,"footnotes":""},"class_list":["post-804","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=804"}],"version-history":[{"count":9,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/804\/revisions"}],"predecessor-version":[{"id":1481,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/804\/revisions\/1481"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}