Pull to refresh page is a common practise in mobile application. However, this becomes challenging in web app as you might have multiple iframe that loads separately or you have overflow elements inside one another. In this case, you may embed our libraries in your page to allow “pull to refresh” in separate iframe or element, or even in normal pages / single pages.

<link rel="stylesheet" href="https://centrecbiz.com/mobile-library/pull-to-refresh.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<script src="https://centrecbiz.com/mobile-library/pull-to-refresh.js" type="text/javascript"></script>

Embed these libraries in the page that you wish to allow users to perform “pull to refresh”.

You may customise the style of the loader and its background by adjusting the CSS as follow.

<style>
.load-screen {
    /*Allow changes*/
    background-color:rgba(0,0,0,0.5);
    padding-top:100px;
}

.screen-loader {
    /*Allow changes*/
    border: 15px solid #f3f3f3;
    border-top: 15px solid #000000;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
</style>

NOTE

Sometimes, instead of the parent element / whole page, you need to detect whether an inner overflow element has been scrolled to the top and ready for “pull to refresh”. These libraries could solve this issue, just make sure that the inner overflow element is given a classname “container-mobile-content“.

<div>
    Parent element / Whole page
    <div class="container-mobile-content">
        Inner overflow element
    </div>
</div>