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