{"id":788,"date":"2021-07-22T22:06:30","date_gmt":"2021-07-22T22:06:30","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/?page_id=788"},"modified":"2024-08-10T12:42:44","modified_gmt":"2024-08-10T12:42:44","slug":"progress-bar","status":"publish","type":"page","link":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/elements\/progress-bar\/","title":{"rendered":"Progress bar element"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Awesome & convenient to use<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Progress bar element is convenient to show your statistical information with eye-catching progress lines. Just use this element by drag-n-drop.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Progress\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Style options galore<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Dozens of style options are ready. If you want you can fully-customize the look of progress bar, title and percentage as well.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Control text position<\/h3>

This option is to control the position of progress bar title. Choose one you like.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Percentage position<\/h3>

This option is to control the position of progress percentage.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Change color & type<\/h3>

This option is to control the type and color of progress bar.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Custom bar size<\/h3>

This option is to control the height of progress bar. Input value from 0 to 100.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Customize shape<\/h3>

This option is to adjust the border radius of progress bar. Both px and % are possible.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t
\"Progress<\/figure>

Customize title<\/h3>

This option is to control the color and typography of progress bar title.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Provide many style to choose<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Choose among 6 fashionable types supported by UDesign theme. If you mind you can build your own progress bars using style options.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

End of bar style<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div>
<\/div><\/div>
Average Improvements<\/span>98%<\/span><\/div>
<\/div><\/div>
Promotion<\/span>69%<\/span><\/div>
<\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

End of percent<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div>
<\/div><\/div>
Average Improvements<\/span>98%<\/span><\/div>
<\/div><\/div>
Promotion<\/span>69%<\/span><\/div>
<\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

After title percent<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div>
<\/div><\/div>
Average Improvements<\/span>98%<\/span><\/div>
<\/div><\/div>
Promotion<\/span>69%<\/span><\/div>
<\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Gradient color<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div>
<\/div><\/div>
Average Improvements<\/span>98%<\/span><\/div>
<\/div><\/div>
Promotion<\/span>69%<\/span><\/div>
<\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Animated colors<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div>
<\/div><\/div>
Average Improvements<\/span>98%<\/span><\/div>
<\/div><\/div>
Promotion<\/span>69%<\/span><\/div>
<\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Size, shape & inner text<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>98%<\/span><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>86%<\/span><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Performance<\/span>69%<\/span><\/div><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/section>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\r\n\r\n<\/svg>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Glossary<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Progress bar element options<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Customize Elements Globally or Individually<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
    \n \t
  • Text Position<\/strong> – Control the location of progress bar title.<\/li>\n \t
  • Display Percentage<\/strong> – Enable to display percentage or not.<\/li>\n \t
  • Percentage Position<\/strong> – Select available percentage position.<\/li>\n \t
  • Title <\/b>– Input any progress bar title.<\/li>\n \t
  • Skin<\/strong> – Select the progress bar skin from 10 default types.<\/li>\n \t
  • Percentage <\/b>– Pick up the percentage value from 0 to 100.<\/li>\n \t
  • Spacing <\/b>– Control the space between progress bar it.<\/li>\n \t
  • Effect <\/b>– Choose your effect for progressbars.<\/li>\n \t
  • Background Color<\/strong> – Control background color of each progress bar.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t
    \r\n\r\n\t\t\t\t\r\n\t\t\t\t
    \r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t
      \n\n \t
    • Color Type<\/strong> – Select color types from 2 options – Gradient and Classic.<\/li>\n \t
    • Height<\/strong> – Adjust the height of progress bar.<\/li>\n \t
    • Border Radius <\/b>– Control the border radius of progress bar.<\/li>\n \t
    • Padding <\/b>– Control the padding of progress box.<\/li>\n \t
    • Text Color <\/b>– Control color of progress bar title.<\/li>\n \t
    • Typography <\/b>– Control the typography of progress bar title.<\/li>\n \t
    • Percentage Color <\/b>– Control color of percentage.<\/li>\n \t
    • Percentage Typography <\/b>– Control the typography of percentage.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      Awesome & convenient to use Progress bar element is convenient to show your statistical information with eye-catching progress lines. Just use this element by drag-n-drop. Style options galore Dozens of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/788\/revisions"}],"predecessor-version":[{"id":31442,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/788\/revisions\/31442"}],"up":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/2"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/media?parent=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}