{"id":1715,"date":"2022-09-26T08:11:36","date_gmt":"2022-09-26T08:11:36","guid":{"rendered":"https:\/\/phox.whmcsdes.com\/docs\/?p=1715"},"modified":"2022-09-26T14:28:19","modified_gmt":"2022-09-26T14:28:19","slug":"progress-widget","status":"publish","type":"post","link":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/","title":{"rendered":"Progress Widget"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"65\" height=\"58\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\" alt=\"\" class=\"wp-image-1716\"\/><\/figure>\n\n\n\n<p>Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Progress Sample<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"572\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/sample.png\" alt=\"\" class=\"wp-image-1717\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/sample.png 680w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/sample-300x252.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Content<\/h4>\n\n\n\n<p>there are two types of progress (Bar &amp; Circle). based on your choice the options change.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Bar<\/h5>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"500\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-bar-content.png\" alt=\"\" class=\"wp-image-1718\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-bar-content.png 300w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-bar-content-180x300.png 180w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Progress bar presets:<\/strong> There are several types of progress bar positioning for the content that comes with the progress bar.<\/li><li><strong>Title:<\/strong> Define the title for the progress<\/li><li><strong>Icon: <\/strong>Choose the icon from Elementor icons Library<\/li><li><strong>Percentage: <\/strong>Specify the state of the progress bar you\u2019re currently editing.<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Circle<\/h5>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"517\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-circle-content.png\" alt=\"\" class=\"wp-image-1720\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-circle-content.png 297w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-circle-content-172x300.png 172w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Percent value: <\/strong>Specify the state of the progress circle you\u2019re currently editing.<\/li><li><strong>Prefix: <\/strong>Specify the prefix value for the number<\/li><li><strong>Suffix: <\/strong>Specify the suffix value for the number<\/li><li><strong>Title:<\/strong> Define the title for the progress<\/li><li><strong>Sub Title:<\/strong> Define the subtitle for the progress<\/li><li><strong>Percent Position:<\/strong> Choose between &#8220;inside of Circle&#8221; and &#8220;outside of Circle&#8221;<\/li><li><strong>Labels Position:<\/strong> Choose between &#8220;inside of Circle&#8221; and &#8220;outside of Circle&#8221;<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Style<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Bar<\/h5>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-bar-390x1024.png\" alt=\"\" class=\"wp-image-1724\" height=\"650\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-bar-390x1024.png 390w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-bar-114x300.png 114w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-bar-585x1536.png 585w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-bar.png 590w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Bar<\/strong><ul><li><strong>Height: <\/strong>Specify the progress bar height<\/li><li><strong>Margin: <\/strong>Specify the margins.<\/li><li><strong>Background Type:\u00a0<\/strong>Choose, whether you want to use\u00a0<strong>classic<\/strong>\u00a0or\u00a0<strong>gradient<\/strong>\u00a0type for the bar. The customization options vary for each type.<\/li><li><strong>Border Type<\/strong>: Select the needed type of border to use.<\/li><li><strong>Border Radius<\/strong>: Set the border radius to make the angles more smooth and round.<\/li><li><strong>Box Shadow<\/strong>: Apply the shadow and change the shadow\u2019s settings, such as\u00a0color, blur, spread,\u00a0and\u00a0position.<\/li><li><strong>Status Bar<\/strong><ul><li><strong>Background Type:\u00a0<\/strong>Choose, whether you want to use\u00a0<strong>classic<\/strong>\u00a0or\u00a0<strong>gradient<\/strong>\u00a0type for the status bar The customization options vary for each type.<\/li><li><strong>Border Radius<\/strong>: Set the border radius to make the angles more smooth and round.<\/li><\/ul><\/li><\/ul><\/li><li><strong>Title<\/strong><ul><li><strong>Alignment:<\/strong>\u00a0Align the title to the left, right, or center.<\/li><li><strong>Background Type:\u00a0<\/strong>Choose, whether you want to use\u00a0<strong>classic<\/strong>\u00a0or\u00a0<strong>gradient<\/strong>\u00a0type for the title. The customization options vary for each type.<\/li><li><strong>Border Type<\/strong>: Select the needed type of border to use.<\/li><li><strong>Border Radius<\/strong>: Set the border radius to make the angles more smooth and round.<\/li><li><strong>Box Shadow<\/strong>: Apply the shadow and change the shadow\u2019s settings, such as\u00a0color, blur, spread,\u00a0and\u00a0position.<\/li><li><strong>Padding<\/strong>: Set the preferable custom padding. Fill in the values for the\u00a0top, bottom, right,\u00a0and\u00a0left\u00a0padding in pixels or % to apply your custom padding.<\/li><li><strong>Margin: <\/strong>Specify the margins.<\/li><li><strong>Icon<\/strong><ul><li><strong>Color:<\/strong>\u00a0Set the color for the icon.<\/li><li><strong>Icon Size<\/strong>: Set the font size for the icon.<\/li><li><strong>Margin: <\/strong>Specify the margins.<\/li><\/ul><\/li><li><strong>Text<\/strong><ul><li><strong>Color:<\/strong>\u00a0Choose the color of the text.<\/li><li><strong>Typography:<\/strong>\u00a0Change the typography options for the text.<\/li><li><strong>Alignment:<\/strong>\u00a0Align the title vertical to the top, middle, or bottom.<\/li><\/ul><\/li><\/ul><\/li><li><strong>Percentage<\/strong><ul><li><strong>Alignment:<\/strong>\u00a0Align the percentage to the left, right, or center.<\/li><li><strong>Background Type:\u00a0<\/strong>Choose, whether you want to use\u00a0<strong>classic<\/strong>\u00a0or\u00a0<strong>gradient<\/strong>\u00a0type for the percentage. The customization options vary for each type.<\/li><li><strong>Border Type<\/strong>: Select the needed type of border to use.<\/li><li><strong>Border Radius<\/strong>: Set the border radius to make the angles more smooth and round.<\/li><li><strong>Box Shadow<\/strong>: Apply the shadow and change the shadow\u2019s settings, such as\u00a0color, blur, spread,\u00a0and\u00a0position.<\/li><li><strong>Margin: <\/strong>Specify the margins.<\/li><li><strong>Padding<\/strong>: Set the preferable custom padding. Fill in the values for the\u00a0top, bottom, right,\u00a0and\u00a0left\u00a0padding in pixels or % to apply your custom padding.<\/li><li><strong>Color:<\/strong>\u00a0Set the color for the percentage.<\/li><li><strong>Typography:<\/strong>\u00a0Change the typography options for the percentage.<\/li><li><strong>Suffix Font Size:<\/strong> Specify the font size for the suffix<\/li><li><strong>Percent Suffix Alignment:<\/strong>\u00a0Align the suffix vertical to the top, middle, or bottom.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Circle<\/h5>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-circle-478x1024.png\" alt=\"\" class=\"wp-image-1728\" height=\"650\" srcset=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-circle-478x1024.png 478w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-circle-140x300.png 140w, https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/progress-style-circle.png 598w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong>Global<\/strong><ul><li><strong>Circle Size: <\/strong>Specify the\u00a0Circle Size.<\/li><li><strong>Stroke: <\/strong>Specify the\u00a0Circle stroke.<\/li><li><strong>Stroke Type: <\/strong>Choose between Color and Gradient. and choose the colors.<\/li><li><strong>LineCap<\/strong>: Choose between &#8220;Butt&#8221;, &#8220;Round&#8221;, and &#8220;Square&#8221;.<\/li><li><strong>Animation Duration: <\/strong>Specify the time in Milliseconds.<\/li><\/ul><\/li><li><strong>Number<\/strong><ul><li><strong>Color:<\/strong>\u00a0Set the color for the number.<\/li><li><strong>Typography:<\/strong>\u00a0Change the typography options for the number.<\/li><li><strong>Padding<\/strong>: Set the preferable custom padding. Fill in the values for the\u00a0top, bottom, right,\u00a0and\u00a0left\u00a0padding in pixels or % to apply your custom padding.<\/li><li><strong>Prefix Font Size:<\/strong> Specify the font size for the prefix<\/li><li><strong>Prefix Gap:<\/strong> Specify the gap for the prefix<\/li><li><strong>Prefix Alignment:<\/strong>\u00a0Align the prefix vertical to the top, middle, or bottom.<\/li><li><strong>Suffix Font Size:<\/strong> Specify the font size for the suffix<\/li><\/ul><ul><li><strong><strong>Suffix<\/strong> Gap:<\/strong> Specify the gap for the suffix<\/li><li><strong><strong>Suffix<\/strong> Alignment:<\/strong>\u00a0Align the suffix vertical to the top, middle, or bottom.<\/li><li><strong>Alignment:<\/strong>\u00a0Align the number to the left, right, or center.<\/li><\/ul><\/li><li><strong>Title<\/strong><ul><li><strong>Color:<\/strong>\u00a0Set the color for the title.<\/li><li><strong>Typography:<\/strong>\u00a0Change the typography options for the title.<\/li><li><strong>Padding<\/strong>: Set the preferable custom padding. Fill in the values for the\u00a0top, bottom, right,\u00a0and\u00a0left\u00a0padding in pixels or % to apply your custom padding.<\/li><li><strong>Alignment:<\/strong>\u00a0Align the number to the left, right, or center.<\/li><\/ul><\/li><li><strong>SubTitle<\/strong><ul><li><strong>Color:<\/strong>\u00a0Set the color for the subtitle.<\/li><\/ul><ul><li><strong>Typography:<\/strong>\u00a0Change the typography options for the subtitle.<\/li><li><strong>Padding<\/strong>: Set the preferable custom padding. Fill in the values for the\u00a0top, bottom, right,\u00a0and\u00a0left\u00a0padding in pixels or % to apply your custom padding.<\/li><li><strong>Alignment:<\/strong>\u00a0Align the number to the left, right, or center.<\/li><\/ul><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items. Progress Sample Content there are two types of progress (Bar &amp; Circle). based [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[57,25,89,90,91,26],"class_list":["post-1715","post","type-post","status-publish","format-standard","hentry","category-elementor","tag-elementor","tag-phox","tag-progress","tag-progress-bar","tag-progress-circle","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Progress Widget - Phox Documentation<\/title>\n<meta name=\"description\" content=\"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progress Widget - Phox Documentation\" \/>\n<meta property=\"og:description\" content=\"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Phox Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/whmcsdes\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-26T08:11:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-26T14:28:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\" \/>\n<meta name=\"author\" content=\"ijeto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@whmcsdes\" \/>\n<meta name=\"twitter:site\" content=\"@whmcsdes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ijeto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\"},\"author\":{\"name\":\"ijeto\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f\"},\"headline\":\"Progress Widget\",\"datePublished\":\"2022-09-26T08:11:36+00:00\",\"dateModified\":\"2022-09-26T14:28:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\"},\"wordCount\":844,\"publisher\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\",\"keywords\":[\"elementor\",\"phox\",\"progress\",\"progress bar\",\"progress circle\",\"wordpress\"],\"articleSection\":[\"Elementor\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\",\"name\":\"Progress Widget - Phox Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\",\"datePublished\":\"2022-09-26T08:11:36+00:00\",\"dateModified\":\"2022-09-26T14:28:19+00:00\",\"description\":\"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.\",\"breadcrumb\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\",\"contentUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png\",\"width\":65,\"height\":58},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/phox.whmcsdes.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progress Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#website\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/\",\"name\":\"Phox Documentation\",\"description\":\"Hosting WordPress Theme\",\"publisher\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/phox.whmcsdes.com\/docs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#organization\",\"name\":\"WHMCSdes\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png\",\"contentUrl\":\"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png\",\"width\":400,\"height\":400,\"caption\":\"WHMCSdes\"},\"image\":{\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/whmcsdes\",\"https:\/\/x.com\/whmcsdes\",\"https:\/\/www.instagram.com\/whmcsdes\/\",\"https:\/\/www.linkedin.com\/company\/whmcsdes\",\"https:\/\/www.youtube.com\/channel\/UC8fIGmE0nDeKXizKml3wV5w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f\",\"name\":\"ijeto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g\",\"caption\":\"ijeto\"},\"sameAs\":[\"http:\/\/phox.whmcsdes.com\/docs\"],\"url\":\"https:\/\/phox.whmcsdes.com\/docs\/author\/ijeto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progress Widget - Phox Documentation","description":"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/","og_locale":"en_US","og_type":"article","og_title":"Progress Widget - Phox Documentation","og_description":"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.","og_url":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/","og_site_name":"Phox Documentation","article_publisher":"https:\/\/www.facebook.com\/whmcsdes","article_published_time":"2022-09-26T08:11:36+00:00","article_modified_time":"2022-09-26T14:28:19+00:00","og_image":[{"url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png","type":"","width":"","height":""}],"author":"ijeto","twitter_card":"summary_large_image","twitter_creator":"@whmcsdes","twitter_site":"@whmcsdes","twitter_misc":{"Written by":"ijeto","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#article","isPartOf":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/"},"author":{"name":"ijeto","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f"},"headline":"Progress Widget","datePublished":"2022-09-26T08:11:36+00:00","dateModified":"2022-09-26T14:28:19+00:00","mainEntityOfPage":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/"},"wordCount":844,"publisher":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png","keywords":["elementor","phox","progress","progress bar","progress circle","wordpress"],"articleSection":["Elementor"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/","url":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/","name":"Progress Widget - Phox Documentation","isPartOf":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png","datePublished":"2022-09-26T08:11:36+00:00","dateModified":"2022-09-26T14:28:19+00:00","description":"Progress Bar and Circle Progress widgets assist you when you need to visualize the information and want the numbers to speak for you. You can use them to display the stages of a process, and progress, use them to compare several items.","breadcrumb":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#primaryimage","url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png","contentUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2022\/09\/wdes-widget-progress.png","width":65,"height":58},{"@type":"BreadcrumbList","@id":"https:\/\/phox.whmcsdes.com\/docs\/progress-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/phox.whmcsdes.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Progress Widget"}]},{"@type":"WebSite","@id":"https:\/\/phox.whmcsdes.com\/docs\/#website","url":"https:\/\/phox.whmcsdes.com\/docs\/","name":"Phox Documentation","description":"Hosting WordPress Theme","publisher":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/phox.whmcsdes.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/phox.whmcsdes.com\/docs\/#organization","name":"WHMCSdes","url":"https:\/\/phox.whmcsdes.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png","contentUrl":"https:\/\/phox.whmcsdes.com\/docs\/wp-content\/uploads\/2020\/10\/logo-wdes.png","width":400,"height":400,"caption":"WHMCSdes"},"image":{"@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/whmcsdes","https:\/\/x.com\/whmcsdes","https:\/\/www.instagram.com\/whmcsdes\/","https:\/\/www.linkedin.com\/company\/whmcsdes","https:\/\/www.youtube.com\/channel\/UC8fIGmE0nDeKXizKml3wV5w"]},{"@type":"Person","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/ac6ec1f4e42b1b805b9525d05e90fd4f","name":"ijeto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/phox.whmcsdes.com\/docs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6896e83e636388dbfdd81beba7b9795b1dce0ff373786cba2f347a62896f1c39?s=96&d=mm&r=g","caption":"ijeto"},"sameAs":["http:\/\/phox.whmcsdes.com\/docs"],"url":"https:\/\/phox.whmcsdes.com\/docs\/author\/ijeto\/"}]}},"_links":{"self":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/1715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/comments?post=1715"}],"version-history":[{"count":11,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/1715\/revisions"}],"predecessor-version":[{"id":1734,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/posts\/1715\/revisions\/1734"}],"wp:attachment":[{"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/media?parent=1715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/categories?post=1715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phox.whmcsdes.com\/docs\/wp-json\/wp\/v2\/tags?post=1715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}