{"id":2700,"date":"2023-07-30T16:42:14","date_gmt":"2023-07-30T16:42:14","guid":{"rendered":"https:\/\/product.uicreatedesign.in\/uicrafty\/modal-popup-copy\/"},"modified":"2023-07-30T16:50:16","modified_gmt":"2023-07-30T16:50:16","slug":"progress-bar","status":"publish","type":"post","link":"https:\/\/product.uicreatedesign.in\/uicrafty\/progress-bar\/","title":{"rendered":"Progress Bar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2700\" class=\"elementor elementor-2700\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3966e11 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3966e11\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c0a7279\" data-id=\"c0a7279\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7a872d0 elementor-widget elementor-widget-heading\" data-id=\"7a872d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Progress Bar<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3a1bcf elementor-widget elementor-widget-text-editor\" data-id=\"c3a1bcf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div><div>The ultimate Elementor Progress Bar Widget helps you showcase users&#8217; skills, task progress, download percentage, and other attributes&#8217; progression in a versatile way. Ui Crafty For Elementor Progress Bar widget is the easiest way to display advance of any details in handsome style.<\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe8cdd4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fe8cdd4\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12fd871\" data-id=\"12fd871\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7fea61a elementor-widget elementor-widget-heading\" data-id=\"7fea61a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Style 1<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-be1eb1f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"be1eb1f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-ca6b302\" data-id=\"ca6b302\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6fa9d60 elementor-widget elementor-widget-ui_crafty_progressbar\" data-id=\"6fa9d60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ui_crafty_progressbar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"ui_crafty-progressbar-box ui_crafty-progressbar-style-3\">\r\n        <div class=\"ui_crafty-progressbar-content\">\r\n\r\n        <!-- SECTION TITLE START -->\r\n            <span class=\"progress-title\">HTML<\/span>\r\n        <!-- SECTION TITLE END -->\r\n\r\n         <!-- SECTION PROGRESS BAR START -->\r\n            <div class=\"ui_crafty-progress-bar\">\r\n                <span class=\"show-progress\" data-percent=\"88\">\r\n                    <span class=\"progress-value\">88% <\/span>\r\n                <\/span>\r\n            <\/div>\r\n         <!-- SECTION PROGRESS BAR END -->\r\n\r\n    <\/div>\r\n        <div class=\"ui_crafty-progressbar-content\">\r\n\r\n        <!-- SECTION TITLE START -->\r\n            <span class=\"progress-title\">CSS<\/span>\r\n        <!-- SECTION TITLE END -->\r\n\r\n         <!-- SECTION PROGRESS BAR START -->\r\n            <div class=\"ui_crafty-progress-bar\">\r\n                <span class=\"show-progress\" data-percent=\"67\">\r\n                    <span class=\"progress-value\">67% <\/span>\r\n                <\/span>\r\n            <\/div>\r\n         <!-- SECTION PROGRESS BAR END -->\r\n\r\n    <\/div>\r\n        <div class=\"ui_crafty-progressbar-content\">\r\n\r\n        <!-- SECTION TITLE START -->\r\n            <span class=\"progress-title\">JavaScript<\/span>\r\n        <!-- SECTION TITLE END -->\r\n\r\n         <!-- SECTION PROGRESS BAR START -->\r\n            <div class=\"ui_crafty-progress-bar\">\r\n                <span class=\"show-progress\" data-percent=\"81\">\r\n                    <span class=\"progress-value\">81% <\/span>\r\n                <\/span>\r\n            <\/div>\r\n         <!-- SECTION PROGRESS BAR END -->\r\n\r\n    <\/div>\r\n    <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cfda3ff elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cfda3ff\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fb8c546\" data-id=\"fb8c546\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-27017e2 elementor-widget elementor-widget-heading\" data-id=\"27017e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Style 2<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-b55400d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b55400d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-848d402\" data-id=\"848d402\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-db4f0fd elementor-widget elementor-widget-ui_crafty_progressbar\" data-id=\"db4f0fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ui_crafty_progressbar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n    <div class=\"ui_crafty-progressbar-box ui_crafty-progressbar-style-2 \">\r\n\r\n                    <div class=\"ui_crafty-progressbar-content\">\r\n\r\n                <!-- SECTION TITLE START -->\r\n                                            <div class=\"progress-title-content\"><h5 class=\"progress-title\">HTML<\/h5><\/div>\r\n                                    <!-- SECTION TITLE END -->\r\n                <div class=\"ui_crafty-progress-box\">\r\n                    <!-- SECTION PROGRESS BAR START -->\r\n                    <div class=\"ui_crafty-progress-bar\">\r\n                        <span class=\"show-progress\" data-percent=\"88\"><\/span>\r\n                    <\/div>\r\n                    <!-- SECTION PROGRESS BAR END -->\r\n                    <!-- SECTION TAB SCORE START -->\r\n                                            <div class=\"progress-value\">88% <\/div>\r\n                                        <!-- SECTION TAB SCORE END -->\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"ui_crafty-progressbar-content\">\r\n\r\n                <!-- SECTION TITLE START -->\r\n                                            <div class=\"progress-title-content\"><h5 class=\"progress-title\">CSS<\/h5><\/div>\r\n                                    <!-- SECTION TITLE END -->\r\n                <div class=\"ui_crafty-progress-box\">\r\n                    <!-- SECTION PROGRESS BAR START -->\r\n                    <div class=\"ui_crafty-progress-bar\">\r\n                        <span class=\"show-progress\" data-percent=\"67\"><\/span>\r\n                    <\/div>\r\n                    <!-- SECTION PROGRESS BAR END -->\r\n                    <!-- SECTION TAB SCORE START -->\r\n                                            <div class=\"progress-value\">67% <\/div>\r\n                                        <!-- SECTION TAB SCORE END -->\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"ui_crafty-progressbar-content\">\r\n\r\n                <!-- SECTION TITLE START -->\r\n                                            <div class=\"progress-title-content\"><h5 class=\"progress-title\">JavaScript<\/h5><\/div>\r\n                                    <!-- SECTION TITLE END -->\r\n                <div class=\"ui_crafty-progress-box\">\r\n                    <!-- SECTION PROGRESS BAR START -->\r\n                    <div class=\"ui_crafty-progress-bar\">\r\n                        <span class=\"show-progress\" data-percent=\"81\"><\/span>\r\n                    <\/div>\r\n                    <!-- SECTION PROGRESS BAR END -->\r\n                    <!-- SECTION TAB SCORE START -->\r\n                                            <div class=\"progress-value\">81% <\/div>\r\n                                        <!-- SECTION TAB SCORE END -->\r\n                <\/div>\r\n            <\/div>\r\n        \r\n    <\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-75e7924 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"75e7924\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3a14d25\" data-id=\"3a14d25\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f829096 elementor-widget elementor-widget-heading\" data-id=\"f829096\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Style 3<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fb80567 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb80567\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-bd52eb7\" data-id=\"bd52eb7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-363008e elementor-widget elementor-widget-ui_crafty_progressbar\" data-id=\"363008e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ui_crafty_progressbar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"ui_crafty-progressbar-box ui_crafty-progressbar-style-3 \">\r\n\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">HTML<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"88\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">CSS<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"67\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">JavaScript<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"81\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n    \r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a946566 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a946566\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2531047\" data-id=\"2531047\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8a08540 elementor-widget elementor-widget-heading\" data-id=\"8a08540\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Style 4<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-62fdc99 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"62fdc99\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-149e63f\" data-id=\"149e63f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3b508c9 elementor-widget elementor-widget-ui_crafty_progressbar\" data-id=\"3b508c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ui_crafty_progressbar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"ui_crafty-progressbar-box ui_crafty-progressbar-style-3 \">\r\n\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">HTML<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"88\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">CSS<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"67\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n            <div class=\"ui_crafty-progressbar-content\">\r\n\r\n            <!-- SECTION TITLE START -->\r\n                                    <div class=\"progress-title-content\"><h5 class=\"progress-title\">JavaScript<\/h5><\/div>\r\n                            <!-- SECTION TITLE END -->\r\n            <div class=\"ui_crafty-progress-box\">\r\n                <!-- SECTION PROGRESS BAR START -->\r\n                <div class=\"ui_crafty-progress-bar\">\r\n                    <span class=\"show-progress\" data-percent=\"81\"><\/span>\r\n                <\/div>\r\n                <!-- SECTION PROGRESS BAR END -->            \r\n            <\/div>\r\n        <\/div>\r\n    \r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Progress Bar The ultimate Elementor Progress Bar Widget helps you showcase users&#8217; skills, task progress, download percentage, and other attributes&#8217; progression in a versatile way. Ui Crafty For Elementor Progress Bar widget is the easiest way to display advance of any details in handsome style. Style 1 HTML 88% CSS 67% JavaScript 81% Style 2 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2700","post","type-post","status-publish","format-standard","hentry","category-demos"],"_links":{"self":[{"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/posts\/2700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/comments?post=2700"}],"version-history":[{"count":0,"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/posts\/2700\/revisions"}],"wp:attachment":[{"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/media?parent=2700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/categories?post=2700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/product.uicreatedesign.in\/uicrafty\/wp-json\/wp\/v2\/tags?post=2700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}