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

Hi,

I want a to use this "js iOS overlay" (below) to display between pages a loading message.
https://taitems.github.io/iOS-Overlay/

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 month ago
Are you loading the pages via ajax?This will be fluid only if you load your pages via ajax
mashtullah 1 month ago
nope they are normal links ... yes I know but I need it as fluid as possible
davesargent 1 month ago
awarded to LayZee

Crowdsource coding tasks.

1 Solution

Winning solution

Sample solution

Full source code and demo available on Codepen:

http://codepen.io/layzee/pen/aJOREb

Dependencies

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

HTML

<img class="wallpaper"
     src="http://lorempixel.com/1920/1080/abstract/"
     width="1920"
     height="1080"
     role="presentation" />

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

CSS

html,
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%;
}

JavaScript

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

    var overlay;

    function displayLoadingSpinner() {
        var options,
            spinner,
            target;

        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');
        document.body.appendChild(target);
        spinner = new Spinner(options).spin(target);
        setOverlay(iosOverlay({
            spinner: spinner,
            text: 'Loading'
        }));
    }

    function getOverlay() {
        return overlay;
    }

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

        overlay = value;
    };

    // Display loading spinner initially
    displayLoadingSpinner();

    // Hide loading spinner when the page has fully loaded
    $(document).ready(setTimeout(function hideLoadingSpinner() {
        $('#page-title').addClass('is-visible');
        getOverlay().hide();
    }, 2000));

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