Dynamic Content Loading Using Fetch API – pill.js

Category: Javascript , Loading , Recommended | April 1, 2019
Views Total:886 views
Official Page:Go to website
Last Update:April 1, 2019


Dynamic Content Loading Using Fetch API – pill.js


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:


Install & download.

$ 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 -->

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() {}

You Might Be Interested In:

Leave a Reply