O'Reilly logo

Ionic Cookbook by Hoc Phan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a scroll progress bar directive

Progress bars are very useful, as they indicate the amount of task that is completed. It gives users a great experience in terms of what to expect (or how long the process should take to finish). In content websites such as blogs, you may have observed that the progress bar is also used to show how much the users have read. In this recipe, you will create a custom directive to show the reading progress. The concept is very simple. This directive basically checks against the scroll position of <ion-content> in order to adjust the bar (div) length.

The following is the screenshot of the app:

Creating a scroll progress bar directive

There are 100 items ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required