{"id":17134,"date":"2020-04-16T07:05:40","date_gmt":"2020-04-16T07:05:40","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=17134"},"modified":"2020-04-16T08:16:38","modified_gmt":"2020-04-16T08:16:38","slug":"how-to-add-reading-progress-bar-for-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-reading-progress-bar-for-amp\/","title":{"rendered":"How to add Reading Progress Bar for AMP"},"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\u2019t 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\u2019t you think? This helps the user to know how far he\u2019s from the finish the publication.<\/p>\n\n\n\n

Step 1 \u2013\u00a0<\/strong>First, you need to purchase and install\u00a0the Reading Progress Bar for AMP<\/a><\/strong>\u00a0plugin.<\/p>\n\n\n\n

Here are the steps:<\/strong><\/p>\n\n\n\n

  1. Download and Install\u00a0Reading Progress Bar for AMP<\/a>.<\/strong><\/li>
  2. Upload and Activate<\/li>
  3. Done! The Reading Progress Bar for AMP will be visible on the AMP version of your site.<\/li><\/ol>\n\n\n\n

    Step 2 –<\/strong> You will find this option in WordPress Dashboard<\/strong> -> AMP option panel<\/strong> -> Navigate to AMP Reading Progress Bar Option<\/strong> -> Settings<\/strong> -> Enable “Page Scroll Progress Indicator<\/strong>” option. <\/p>\n\n\n\n

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

    Step 3 – <\/strong> Hit the “Save Changes<\/strong>” button. <\/p>\n\n\n\n

    The Output of the Reading Progress Bar for AMP.<\/strong> <\/h4>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

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

    We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n

    \n\t\t\tAsk your Questions Directly!<\/strong>
    \n\t\t\t
    If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t