Loading message in JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x


I want a to use this "js iOS overlay" (below) to display between pages a loading message.

It must be as fluid as possible. So there is no (little) white screens between the two pages (exit, enter).

Or if you have a better solution for a loading message that looks like the iOS overlay.

Are you loading the pages via ajax?
mashtullah 1 year ago
Are you loading the pages via ajax?This will be fluid only if you load your pages via ajax
mashtullah 1 year ago
nope they are normal links ... yes I know but I need it as fluid as possible
WhiteHat 1 year ago
awarded to LayZee

Crowdsource coding tasks.

1 Solution

Winning solution

Sample solution

Full source code and demo available on Codepen:



  • jQuery (v3.x compatible)
  • spin.js
  • iosOverlay.js


<img class="wallpaper"
     role="presentation" />

<h1 id="page-title" class="page-title">
    Page has fully loaded


body {
    min-height: 100%;

.page-title {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;

    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;
    padding-top: 0.8rem;
    padding-right: 1rem;
    padding-bottom: 0.8rem;
    padding-left: 1rem;

    color: rgba(0, 0, 0, 0.8);
    text-align: center;

    background-color: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);

.page-title.is-visible {
    visibility: visible;

.wallpaper {
    position: fixed;
    top: 0;
    left: 0;

    min-width: 100%;
    min-height: 100%;


(function iosOverlayModule(document, iosOverlay, $, Spinner){
    'use strict';

    var overlay;

    function displayLoadingSpinner() {
        var options,

        options = {
            lines: 13, // The number of lines to draw
            length: 11, // The length of each line
            width: 5, // The line thickness
            radius: 17, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 0, // The rotation offset
            color: '#FFF', // #rgb or #rrggbb
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: true, // Whether to use hardware acceleration
            className: 'spinner', // The CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: 'auto', // Top position relative to parent in px
            left: 'auto' // Left position relative to parent in px

        target = document.createElement('div');
        spinner = new Spinner(options).spin(target);
            spinner: spinner,
            text: 'Loading'

    function getOverlay() {
        return overlay;

    function setOverlay(value) {
        if (overlay !== undefined) {
            overlay = undefined;

        overlay = value;

    // Display loading spinner initially

    // Hide loading spinner when the page has fully loaded
    $(document).ready(setTimeout(function hideLoadingSpinner() {
    }, 2000));

    // Display loading spinner when navigation to another page has been started
    $(window).on({ beforeunload: displayLoadingSpinner });
}(this.document, this.iosOverlay, this.jQuery, this.Spinner));