{"id":380823,"date":"2026-10-08T20:34:49","date_gmt":"2026-10-08T20:34:49","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/progress-bar-meter-block\/"},"modified":"2026-10-08T20:34:22","modified_gmt":"2026-10-08T20:34:22","slug":"designorbital-progress-bar-block","status":"publish","type":"plugin","link":"https:\/\/kin.wordpress.org\/plugins\/designorbital-progress-bar-block\/","author":10934294,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.3","requires":"6.7","requires_php":"7.4","requires_plugins":null,"header_name":"DesignOrbital Progress Bar Block","header_author":"DesignOrbital","header_description":"Animated line progress bar with a label, value, stripes and custom colors.","assets_banners_color":"d3b9c9","last_updated":"2026-10-08 20:34:22","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":71,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"designorbital","date":"2026-10-08 20:34:22","revision":3735482}},"upgrade_notice":{"1.0.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3735456,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3735456,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3735456,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3735456,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"designorbital-progress-bar-block\/progress-bar":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"designorbital-progress-bar-block\/progress-bar","version":"1.0.0","title":"DesignOrbital Progress Bar","category":"widgets","description":"Animated line progress bar with a label, value, stripes and custom colors.","keywords":["progress","progress bar","skill bar","meter","percentage"],"textdomain":"designorbital-progress-bar-block","attributes":{"textAlign":{"type":"string"},"progressBarTitle":{"type":"string","default":"Web Design"},"progressBarTitleTag":{"type":"string","enum":["h1","h2","h3","h4","h5","h6","div","span","p"],"default":"div"},"progressBarValue":{"type":"number","default":75},"progressBarShowValue":{"type":"boolean","default":true},"progressBarSuffix":{"type":"string","default":"%"},"progressBarValuePosition":{"type":"string","enum":["top","inside"],"default":"top"},"progressBarThickness":{"type":"number","default":10},"progressBarRounded":{"type":"boolean","default":true},"progressBarStriped":{"type":"boolean","default":false},"progressBarStripedAnimated":{"type":"boolean","default":false},"progressBarFillColor":{"type":"string","default":""},"progressBarFillGradient":{"type":"string","default":""},"progressBarTrackColor":{"type":"string","default":""},"progressBarValueColor":{"type":"string","default":""},"progressBarValueSize":{"type":"string","default":""},"progressBarAnimate":{"type":"boolean","default":true},"progressBarDuration":{"type":"number","default":1.5}},"example":{"attributes":{"progressBarValue":65,"progressBarAnimate":false}},"supports":{"html":false,"align":false,"className":true,"color":{"background":false,"text":true,"gradients":false},"spacing":{"margin":true,"__experimentalDefaultControls":{"margin":false}},"typography":{"fontSize":true,"lineHeight":true,"__experimentalFontFamily":true,"__experimentalFontWeight":true,"__experimentalFontStyle":true,"__experimentalLetterSpacing":true,"__experimentalTextTransform":true,"__experimentalDefaultControls":{"fontSize":true}}},"editorScript":"file:.\/index.js","viewScript":"file:.\/view.js","style":"file:.\/style-index.css"}},"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3735456,"resolution":"1","location":"assets","locale":"","width":1200,"height":900}},"screenshots":{"1":"The DesignOrbital Progress Bar block in the editor with the Value setting."}},"plugin_section":[],"plugin_tags":[1220,148076,17061,9340,9351],"plugin_category":[],"plugin_contributors":[78195],"plugin_business_model":[],"class_list":["post-380823","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-gutenberg","plugin_tags-meter","plugin_tags-progress","plugin_tags-progress-bar","plugin_contributors-designorbital","plugin_committers-designorbital"],"banners":{"banner":"https:\/\/ps.w.org\/designorbital-progress-bar-block\/assets\/banner-772x250.png?rev=3735456","banner_2x":"https:\/\/ps.w.org\/designorbital-progress-bar-block\/assets\/banner-1544x500.png?rev=3735456","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/designorbital-progress-bar-block\/assets\/icon-128x128.png?rev=3735456","icon_2x":"https:\/\/ps.w.org\/designorbital-progress-bar-block\/assets\/icon-256x256.png?rev=3735456","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/designorbital-progress-bar-block\/assets\/screenshot-1.png?rev=3735456","caption":"The DesignOrbital Progress Bar block in the editor with the Value setting."}],"raw_content":"<!--section=description-->\n<p>This plugin adds an animated DesignOrbital Progress Bar block to the WordPress block editor. Show skills, goals, or any percentage as a clean line bar with a label and value.<\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>Native block built with the WordPress block API \u2014 no shortcodes, no page builder.<\/li>\n<li>Editable label with a choice of heading or text tag, and an optional value with a custom suffix.<\/li>\n<li>Show the value above the bar or inside the fill.<\/li>\n<li>Adjustable bar thickness, and rounded or square ends.<\/li>\n<li>Striped fill with optional stripe animation.<\/li>\n<li>Fill color or gradient, track color, and value color and size.<\/li>\n<li>Fills the bar and counts up the value when it scrolls into view, with an adjustable duration. Respects the visitor's reduced-motion setting.<\/li>\n<li>Typography, text color, and margin controls from the block editor.<\/li>\n<li>Accessible markup using the ARIA <code>progressbar<\/code> role.<\/li>\n<li>Lightweight: styles and scripts load only on pages that use the block.<\/li>\n<li>Translation ready.<\/li>\n<\/ul>\n\n<p>This plugin does not collect any data, set cookies, or connect to external services.<\/p>\n\n<h3>Built by DesignOrbital<\/h3>\n\n<p>This block is developed by <a href=\"https:\/\/designorbital.com\/\">DesignOrbital<\/a>, a team building Full Site Editing themes, blocks, and patterns. Explore our <a href=\"https:\/\/designorbital.com\/theme-price\/free\/\">free Full Site Editing themes<\/a>.<\/p>\n\n<h3>Related resources<\/h3>\n\n<ul>\n<li><a href=\"https:\/\/designorbital.com\/designorbital-blocks-plugin\/\">DesignOrbital Blocks Plugin<\/a> \u2013 35+ blocks and extensions for the block editor.<\/li>\n<li><a href=\"https:\/\/designorbital.com\/wordpress-doc\/designorbital-pattern-library\/\">DesignOrbital Pattern Library<\/a> \u2013 220+ predesigned patterns for building pages.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>In your WordPress admin, go to <strong>Plugins \u2192 Add New<\/strong>, search for \"DesignOrbital Progress Bar Block\", then install and activate it.<\/li>\n<li>Alternatively, upload the <code>designorbital-progress-bar-block<\/code> folder to <code>\/wp-content\/plugins\/<\/code> and activate it from the <strong>Plugins<\/strong> screen.<\/li>\n<li>Open the block editor, click the <strong>+<\/strong> inserter, and search for \"DesignOrbital Progress Bar\".<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20change%20the%20progress%20value%3F\"><h3>How do I change the progress value?<\/h3><\/dt>\n<dd><p>Select the block and use the <strong>Value<\/strong> slider in the block settings sidebar.<\/p><\/dd>\n<dt id=\"can%20i%20turn%20off%20the%20scroll%20animation%3F\"><h3>Can I turn off the scroll animation?<\/h3><\/dt>\n<dd><p>Yes. Open the <strong>Animation<\/strong> panel in the block settings and turn off <strong>Animate On Scroll<\/strong>.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"An animated progress bar block for the block editor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/380823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=380823"}],"author":[{"embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/designorbital"}],"wp:attachment":[{"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=380823"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=380823"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=380823"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=380823"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=380823"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/kin.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=380823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}