Native-Like Pull to Refresh Functionality For The Web – wptr.js

Preview:

Description:

wptr.js is a lightweight JavaScript library wptr.js that enables users to trigger a custom function by simply pulling down on the webpage, just like the standard feature of mobile applications – pull down to refresh.

Perfect for social feeds, blog posts, product catalogs, messaging apps, or any data-driven web applications.

How to use it:

1. Load the required hammer.js (for touch support) and wptr.js libraries in the document.

<script src="/path/to/cdn/hammer.min.js"></script>
<script src="/path/to/lib/wptr.1.1.js"></script>

2. Add the Pull Down To Refresh indicator to the webpage.

<div id="ptr">
  <!-- Pull down indicator -->
  Any Indicator Here
  <!-- loading indicator -->
  Any CSS Loading Indicator Here
</div>
<div id="content">
  <!-- Content that should be draggable for refreshing goes in here -->
</div>

3. Initialize the WebPullToRefresh.

window.onload = function() {
  WebPullToRefresh.init( {
    loadingFunction: exampleLoadingFunction
  } );
};

4. Here is an example loading function that returns a promise the WebPullToRefresh can use.

var exampleLoadingFunction = function() {
  return new Promise( function( resolve, reject ) {
    // Run some async loading code here
    if ( true /* if the loading worked */ ) {
      resolve();
    } else {
      reject();
    }
  });
};

5. Available options.

window.onload = function() {
  WebPullToRefresh.init( {
    // ID of the element holding pannable content area
    contentEl: 'content', 
    // ID of the element holding pull to refresh loading area
    ptrEl: 'ptr', 
    // Number of pixels of panning until refresh 
    distanceToRefresh: 25, 
    // Dragging resistance level
    resistance: 6
  });
};