{"id":9715,"date":"2024-03-22T01:04:54","date_gmt":"2024-03-22T01:04:54","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=9715"},"modified":"2024-03-22T06:32:10","modified_gmt":"2024-03-22T06:32:10","slug":"circle-progress-bar","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2024\/03\/22\/circle-progress-bar\/","title":{"rendered":"Circle Progress Bar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">You can use <strong>Circle Progress Bar <\/strong>Widget for displaying statistic values in a circled form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2024\/03\/circle-progress-1024x520.png\" alt=\"\" class=\"wp-image-9720\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2024\/03\/circle-progress-1024x520.png 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2024\/03\/circle-progress-768x390.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to create Circular Bar Widget?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1<\/strong>. Create, or choose the Column into which you want to add your element. Click on Add New Element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2<\/strong>. Drag UDesign <strong>Circular Bar<\/strong> widget from the element List. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3<\/strong>. Add Circular Bar Widget and edit.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Circular Bar Option.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title <\/strong>&#8211; Title of circular bar in the center of circle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Progress Bar Value<\/strong> &#8211; Value of circular bar in the center of circle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Units<\/strong> &#8211; Unit of circular bar value in the center of circle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>View Mode<\/strong>&#8211; Determine which contents shows from group of title progress bar value and units.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bar Shape<\/strong> &#8211; Select bar type of bar, circle or square.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animation Speed<\/strong> &#8211; Animation speed circular bar finishes animation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Circular Bar Style.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In circle info styles, there are General, Title and Value control options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>General:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Content Position: Content position of circular bar in percent<\/li>\n\n\n\n<li>Content Spacing: Space between title and value<\/li>\n\n\n\n<li>Circle Size: Diameter of circular bar<\/li>\n\n\n\n<li>Bar Color: Border color of circular bar<\/li>\n\n\n\n<li>Track Color: Track color of circular bar<\/li>\n\n\n\n<li>Line Width: Width of circular bar<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Title:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography: Typography of title<\/li>\n\n\n\n<li>Title Color: Color of title<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Value:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Typography: Typography of value<\/li>\n\n\n\n<li>Value Color: Color of value<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can use Circle Progress Bar Widget for displaying statistic values in a circled form. How to create Circular Bar Widget? Step 1. Create, or choose the Column into which you want to add your element. Click on Add New Element. Step 2. Drag UDesign Circular Bar widget from the element List. Step 3. Add [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-9715","post","type-post","status-publish","format-standard","hentry","category-udesign-elements"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/9715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=9715"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/9715\/revisions"}],"predecessor-version":[{"id":9787,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/9715\/revisions\/9787"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=9715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=9715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=9715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}