{"id":21077,"date":"2022-11-22T09:45:52","date_gmt":"2022-11-22T09:45:52","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/?page_id=21077"},"modified":"2024-08-10T12:49:56","modified_gmt":"2024-08-10T12:49:56","slug":"scroll-progressbar","status":"publish","type":"page","link":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/elements\/scroll-progressbar\/","title":{"rendered":"Scroll progressbar element"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21077\" class=\"elementor elementor-21077\">\n\t\t\t\t\t\t<div class=\" elementor-section elementor-top-section elementor-element elementor-element-3526206 elementor-section-boxed elementor-section-height-default elementor-section-height-default smart-sticky-default\" data-id=\"3526206\" data-element_type=\"section\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\" elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dc55dd1 \" data-id=\"dc55dd1\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eb6bf20 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"eb6bf20\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">State for page scrolling<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e06963 me-auto ms-auto elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"2e06963\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">There are 2 methods to show the state of page scrolling, horizontal progress bar &amp; around the scroll to top button. You will see how this element is useful for your page.<span style=\"background-color: var(--alpha-page-wrapper-bg-color);color: var(--alpha-body-color);font-family: var(--alpha-body-font-family),sans-serif;font-size: var(--alpha-body-font-size);font-weight: var(--alpha-body-font-weight);letter-spacing: var(--alpha-body-letter-spacing);text-transform: var(--alpha-body-text-transform)\"><\/span><\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45b7295 elementor-invisible elementor-widget elementor-widget-image\" data-id=\"45b7295\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1020\" height=\"559\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-1.jpg\" class=\"attachment-large size-large wp-image-22754\" alt=\"Content\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-1.jpg 1020w, https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-1-768x421.jpg 768w, https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-1-600x329.jpg 600w\" sizes=\"(max-width: 1020px) 100vw, 1020px\" \/>\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<\/div>\r\n\t\t\t\t\t<div class=\" elementor-section elementor-top-section elementor-element elementor-element-668a5cf elementor-section-boxed elementor-section-height-default elementor-section-height-default smart-sticky-default\" data-id=\"668a5cf\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\" elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a27f6c \" data-id=\"5a27f6c\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be98b90 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"be98b90\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Style options <span class=\"text-primary\">galore<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd7b3e3 ms-auto me-auto elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"fd7b3e3\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">UDesign scrollbar is the perfect element to show a lot of information as several groupsin a small area. Enjoy the Accordion Element.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\" elementor-section elementor-inner-section elementor-element elementor-element-880e319 elementor-section-boxed elementor-section-height-default elementor-section-height-default smart-sticky-default elementor-invisible\" data-id=\"880e319\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\" elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-1d5368d \" data-id=\"1d5368d\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-67328fe cs-imgbox w-100 elementor-widget elementor-widget-udesign_widget_imagebox\" data-id=\"67328fe\" data-element_type=\"widget\" data-widget_type=\"udesign_widget_imagebox.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"image-box position-top\"><figure><img decoding=\"async\" width=\"321\" height=\"114\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-2-1.jpg\" class=\"attachment-full size-full wp-image-22755\" alt=\"Content\" \/><\/figure><div class=\"image-box-content\"><h3 class=\"title\">Select type<\/h3><p class=\"content\">Which type will you use? Please choose your favourite type for imagebox.<\/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\t<div class=\" elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ae1eee7 \" data-id=\"ae1eee7\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e7b8a6f cs-imgbox w-100 elementor-widget elementor-widget-udesign_widget_imagebox\" data-id=\"e7b8a6f\" data-element_type=\"widget\" data-widget_type=\"udesign_widget_imagebox.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"image-box position-top\"><figure><img decoding=\"async\" width=\"321\" height=\"114\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-content\/uploads\/sites\/3\/2022\/11\/scroll-content-2-2.jpg\" class=\"attachment-full size-full wp-image-22756\" alt=\"Content\" \/><\/figure><div class=\"image-box-content\"><h3 class=\"title\">Select position<\/h3><p class=\"content\">Where will you display scroll progressbar? Please choose the position your want.<\/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<\/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 class=\" elementor-section elementor-top-section elementor-element elementor-element-d3c2036 options-glossary  elementor-section-boxed elementor-section-height-default elementor-section-height-default smart-sticky-default elementor-invisible\" data-id=\"d3c2036\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top_negative&quot;:&quot;yes&quot;,&quot;shape_divider_top&quot;:&quot;alpha-shape2&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\r\n\t\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" data-negative=\"true\">\r\n\t\t\t<svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1920 192\" preserveAspectRatio=\"none\">\r\n<path d=\"M0,137.2C269.6,170.4,601.4,190,960,190c358.7,0,690.3-19.6,960-52.8c0-21.4,0,76.2,0,54.8c-640,0-1280,0-1920,0V137.2z\"\/>\r\n<\/svg>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\" elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3788d60 \" data-id=\"3788d60\" data-element_type=\"column\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-82172cc elementor-widget__width-auto elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"82172cc\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:200}\" 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\">Glossary<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e2bc15 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"1e2bc15\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:200}\" 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\">Scroll progressbar element options<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7595d1d elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7595d1d\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Customize Elements Globally or Individually<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\" elementor-section elementor-inner-section elementor-element elementor-element-880a5dc elementor-section-boxed elementor-section-height-default elementor-section-height-default smart-sticky-default elementor-invisible\" data-id=\"880a5dc\" data-element_type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t<div class=\" elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-0d09cde \" data-id=\"0d09cde\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-587745b elementor-widget elementor-widget-text-editor\" data-id=\"587745b\" data-element_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<ul><li><strong>Thickness:<\/strong> Control the height of bar.<\/li><li><strong>Border Radius:<\/strong> Control the border radius of bar.<\/li><li><strong>Bar Color:<\/strong> Control the background color of bar.<\/li><li><strong>Active Bar Color:\u00a0<\/strong>Control the background color of active bar.<\/li><\/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<div class=\" elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-25de5ee \" data-id=\"25de5ee\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\r\n\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1fcce4c elementor-widget elementor-widget-text-editor\" data-id=\"1fcce4c\" data-element_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<ul><li><strong>Select Icon:<\/strong> Select icon for scroll to top button.<\/li><li><strong>Size:<\/strong> Control the size of button.<\/li><li><strong>Offset X:<\/strong> Input for horizontal position of button.<\/li><li><strong>Offset Y:<\/strong> Input for vertical position of button.<\/li><li><strong>Icon Size:<\/strong> Control the button icon size.<\/li><\/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":"<p>State for page scrolling There are 2 methods to show the state of page scrolling, horizontal progress bar &amp; around the scroll to top button. You will see how this [&hellip;]<\/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-21077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/21077","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=21077"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/21077\/revisions"}],"predecessor-version":[{"id":31448,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/elements\/wp-json\/wp\/v2\/pages\/21077\/revisions\/31448"}],"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=21077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}