Download wdtLoading from the Github and upload the files to your server.

Include wdtLoading.js, and wdtLoading.css files.

Your code should then be similar to this:

<link rel="stylesheet" type="text/css" href="wdtLoading.css">
<script type="text/javascript" src="wdtLoading.js"></script>

Install via Bower

bower install wdt-loading

Install via NPM

npm install wdt-loading

We wrote a helper for creating noty easily. So you can use noty(properties); like this;

Returns a NOTY javascript object. (not jquery dom object, but you can access dom with this object) Also, you can give any html to "text" option

Show the loading screen

wdtLoading.start(options);

Show with options

wdtLoading.start({
    category: 'profile',
    speed: 2500
});

Close the loading screen

wdtLoading.done();

Default Options

wdtLoading.defaults = {
    category: 'default', // .wdt-loading-phrase-category[data-category="default"]
    speed   : 2000, // in millisecond
}

HTML Markup

<div class="wdt-loading-screen">
    <div class="wdt-loading-phrases">
        <div class="wdt-loading-phrase-category" data-category="default">
            <div class="wdt-loading-phrase">Doing great things...</div>
            <div class="wdt-loading-phrase">Writing project descriptions...</div>
            <div class="wdt-loading-phrase">Feeding the unicorns...</div>
            <div class="wdt-loading-phrase">Collecting jobs for you...</div>
            <div class="wdt-loading-phrase">Calculating scores...</div>
            <div class="wdt-loading-phrase">Finding best talented people...</div>
            <div class="wdt-loading-phrase">Fixing responsive issues...</div>
            <div class="wdt-loading-phrase">Painting office walls...</div>
            <div class="wdt-loading-phrase">Coffee break...</div>
            <div class="wdt-loading-phrase">Feeding cats...</div>
            <div class="wdt-loading-phrase">Health check...</div>
            <div class="wdt-loading-phrase">Storage check...</div>
        </div>
        <div class="wdt-loading-phrase-category" data-category="profile">
            <div class="wdt-loading-phrase">Getting avatar...</div>
            <div class="wdt-loading-phrase">Collecting project memberships...</div>
            <div class="wdt-loading-phrase">Getting dom together...</div>
            <div class="wdt-loading-phrase">Getting followers...</div>
            <div class="wdt-loading-phrase">Calculating best skills...</div>
            <div class="wdt-loading-phrase">Getting feed...</div>
            <div class="wdt-loading-phrase">Writing title...</div>
        </div>
    </div>
</div>