Customizable Splash Screen For Web App – js-splash

Category: Javascript , Loading | January 14, 2020
Author: koffiisen
Views Total: 39
Official Page: Go to website
Last Update: January 14, 2020
License: MIT

Preview:

Customizable Splash Screen For Web App – js-splash

Description:

js-splash is a pure JavaScript splash screen library to display an introduction page while your web application is launching as you see on the mobile app.

How to use it:

1. Load the js-splash library from the dist folder.

<script src="./dist/js-splash.min.js"></script>

2. Create a new splash screen instance.

var splash = new Splash();

3. Display text on the splash screen. In this example, the splash screen will auto dismiss after 5 seconds.

splash.fromText("SPLASH SCREEN", 5000, {
  // options & styles here
});

4. Display HTML content on the splash screen.

splash.fromHtml("<h3 style='color: #e0a800'>HTML SPLASH</h3>", 5000, {
  // options & styles here
});

5. Display an image (e.g. app logo) on the splash screen.

splash.fromImage("logo.jpg", 5000, {
  // options & styles here
});

6. Display an HTML node on the splash screen.

splash.fromCustomNode(custom_node, 5000, {
  // options & styles here
});

7. Display an CSS animation (e.g. loading spinner) on the splash screen.

splash.fromCSSAnimation('custom-anim.css',
  '<div id="loader-wrapper">\n' +
  '  <div id="loader"></div>\n' +
  '</div>'
);

8. Always show the splash screen untile you dismiss it manually.

var indeterminate = () => {
    splash.fromImage("1.jpg", 5000, {
        width: '120px',
        height: '120px',
        'border-radius': '50%'
    });
};

splash.indeterminateLoad(indeterminate, function (callback) {
    var stop = callback;
    setTimeout(function () {
        console.log("stop execute");
        stop();
    }, 3000);
});

9. Default options & CSS styles.

STYLE = {
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    "z-index": 1e3,
    background: "black",
    opacity: 1,
    transition: "opacity 2s ease"
}, DEFAULT = {
    position: "absolute",
    left: "50%",
    top: "50%",
    transform: "translate(-50%, -50%)",
    width: "auto",
    height: "auto",
    color: "white"
};

You Might Be Interested In:


Leave a Reply