Pull To Refresh Library For Mobile And Desktop – pull-to-reload.js

Preview:

Description:

A lightweight and pure JavaScript implementation of the pull to refresh (aka. Pull to reload, swipe to refresh) functionality on both Mobile and Desktop.

Install it via NPM:

$ npm install pull-to-reload

How to use it:

Create the refresh and content elements as follows:

<div id="ptr">
  ...
</div>

<div id="content">
  ...
</div>

Initialize the pull-to-reload.js and done.

document.addEventListener("DOMContentLoaded", function() {
  ptr = new PullToReload();
});

Possible options with default values.

document.addEventListener("DOMContentLoaded", function() {
  ptr = new PullToReload({
        'refresh-element': 'ptr', // Required
        'content-element': 'content', // Required
        'border-height': 1,
        'height': 80,
        'font-size': '30px',
        'threshold': 20,
        'pre-content': '...',
        'loading-content': 'Loading...',
        'callback-loading': function () {
          setTimeout(function () {
            self.loadingEnd();
          }, 1000);
        } // Required
  });
});