Author: | rumkin |
---|---|
Views Total: | 879 views |
Official Page: | Go to website |
Last Update: | April 1, 2019 |
License: | MIT |
Preview:

Description:
pill.js is an ultra-lightweight JavaScript library to make your webpage behavior like the native app by dynamically loading content into the current webpage using Fetch API.
With pill.js, you can display a top loading indicator on the top until the requested content resources have been loaded in the document.
How to use it:
Installation:
Install & download.
# NPM $ npm install pill --save
Load the pill.js into the document.
<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
Create a sticky loading indicator on the top of the webpage.
<div id="indicator">Loading...</div>
#indicator { position: fixed; top: 0; right: 0; display: none; }
const loadingIndicator = document.querySelector('#indicator')
Initialize the pill library on the web content.
<div id="content"> <!-- content here --> </div>
pill('#content')
Activate the loading indicator.
pill('#content', { onLoading() { loadingIndicator.style.display = 'initial' }, onReady() { loadingIndicator.style.display = 'none' } })
More configuration options.
pill('#content', { /* error handler function defaultErrorHandler() { return { title: 'Error', content: `<h1>Error</h1><p>Ooops. Something went wrong</p>`, code: 500, timestamp: new Date(), } } */ fromError: defaultErrorHandler, /* determines whether the URL could be served by Pill function shouldServeDefault(href) { return href.origin === location.origin } */ shouldServe: shouldServeDefault, // determines whether previuosly loaded page should be loaded from server shouldReload() {} })