{"id":1008,"date":"2020-02-28T06:50:19","date_gmt":"2020-02-28T06:50:19","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&p=1008"},"modified":"2021-06-01T08:11:35","modified_gmt":"2021-06-01T08:11:35","slug":"scroll-progress-bar-for-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/scroll-progress-bar-for-pwa\/","title":{"rendered":"How to use Scroll Progress Bar for PWA"},"content":{"rendered":"\n

Have you ever been to a Website where the scroll seems to be endless and you read and read and the document doesn’t simply stop? Lately, a lot of websites (mainly pages where long articles are published) have started to implement a kind of indicator that displays in a progress bar located at the top of the document that updates when the user scrolls down. <\/p>\n\n\n\n

The progress depends on how far you have scrolled down on the article, pretty simple and cool featured, don’t you think? This helps the user to know how far he’s from the finish the publication. A lot of designers say that the progress bar on the top it’s useful and it combines with the design of the web page, however, the developers see this feature as useless because there’s already a scroll bar, whose progress is almost the same that the bar on the top. What side are you on?<\/p>\n\n\n\n

Step 1 \u2013 <\/strong>First, you need to purchase and install Scroll Progress Bar for PWA<\/a>  plugin.<\/p>\n\n\n\n

For more details on how to download an extension for this Click Here<\/a><\/strong>
<\/p>\n\n\n\n

Step 2 \u2013<\/strong> After Activate this plugin click on the Settings option like below the screenshot.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 3 \u2013<\/strong> Once you click on settings links it will redirect to Features option here enable \u201cScroll Progress Bar<\/strong>\u201d option. Click on the \u201cgear<\/strong>\u201d icon like below the screenshot. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4 \u2013 <\/strong>Once you click on the gear icon you can see the Scroll Progress Bar<\/strong> page select color for the Progress bar and height and then click on the \u201cSubmit<\/strong>\u201d button.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The output of the <\/strong> Scroll Progress Bar<\/strong> <\/h4>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n


Note:<\/strong> For the upcoming update of \u201c Scroll Progress Bar<\/strong> \u201d plugin then you need to enter the license key for this you need to go WordPress Dashboard<\/strong> -> PWA<\/strong>-> Premium Features<\/strong> -> In \u201c Scroll Progress Bar for PWA<\/strong> \u201d option enter the License key and click on \u201cActivate<\/strong>\u201d button. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n

We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us here and<\/strong> we are always available for you.<\/p>\n\n\n\n


<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever been to a Website where the scroll seems to be endless and you read and read and the document doesn’t simply stop? Lately, a lot of websites (mainly pages where long articles are published) have started to implement a kind of indicator that displays in a progress…<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[9],"ht-kb-tag":[],"class_list":["post-1008","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-extension"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=1008"}],"version-history":[{"count":12,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1008\/revisions"}],"predecessor-version":[{"id":1267,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1008\/revisions\/1267"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=1008"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1008"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}