Custom loading screen.

Laynester

a bad bitch
Nov 7, 2018
304
422
Hiya, using javascript, html and css i created a custom client loading screen,
You must be registered for see images attach

Instructions
  1. Place Javascript anywhere in a JS file called on client.php or on the client.php itself.
  2. Place HTML on client.php near the bottom.
  3. Create a CSS File called loader.css, and call it on the client.php
  4. Download the image logo, or edit the CSS and use your own.
  5. Edit your client.php info, look for "processlog.enabled" change that to 1, and save.
JavaScript:
if(typeof(window.FlashExternalnterface) === "undefined") {        window.FlashExternalInterface = {};    }
window.FlashExternalInterface.logLoginStep = function(b) {
    if (b == "client.init.start") {
        document.getElementById('loader_bar').style = "width:10%;";
    }
    if (b == "client.init.core.init") {
    document.getElementById('loader_bar').style = "width:25%;";
    }
    if (b == "client.init.auth.ok") {
    document.getElementById('loader_bar').style = "width:50%;";
    }
    if (b == "client.init.localization.loaded") {
    document.getElementById('loader_bar').style = "width:75%;";
    }
    if (b === "client.init.config.loaded") {
                setTimeout(function() {
                      document.getElementById('loader_bar').style = "width:100%;";
                }, 3000);
        setTimeout(function() {
            $('body').addClass('loaded');
        }, 5000);
    }
}
HTML:
<div id="loader-wrapper" >
    <div class="loader">
         <div id="loader">
            <div class="loading_bar">
                <div class="percent" id="loader_bar"></div>
            </div>
        </div>
    <div class="loader-section section-top"></div>
    <div class="loader-section section-bottom"></div>
    </div>
</div>
Create a directory /assets/client/images/ and save this image, or edit #loader and change the background:url(); to your logo.
You must be registered for see images attach

CSS:
 #loader-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
}
#loader {
     background:url(/assets/client/images/sulake_large.png)top center no-repeat;
     height: 44px;
     width: 300px;
     padding-top:65px;
     text-align: center;
     color:#fff;
     font-size: 20px;
     z-index: 1001;
     display: block;
     position: absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin: auto;
         image-rendering:pixelated;
}
.loading_bar {
  display: block;
  border:1px solid #b1b0b0;
  padding:2px;
  height:30px;
  z-index: 1001;
  margin-top:5px;
}
#loader_bar.percent {
  background:#b1b0b0;
  display: block;
  height:100%;
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
width:2%;
}
#loader-wrapper .loader-section {
     position: fixed;
     width: 100%;
     height: 50%;
     z-index: 1000;
         background:#000;
}
#loader-wrapper .loader-section.section-top {
     top: 0;
     left:0;
     right:0;
}
#loader-wrapper .loader-section.section-bottom {
     bottom: 0;
     left:0;
     right:0;
}
/* Loaded styles */

.loaded #loader-wrapper .loader-section.section-top {
     -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateY(-100%);
    /* IE 9 */
     transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper .loader-section.section-bottom {
     -webkit-transform: translateY(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateY(100%);
    /* IE 9 */
     transform: translateY(100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader {
     opacity: 0;
     -webkit-transition: all 0.3s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 0.3s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper {
     visibility: hidden;
     -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(-100%);
    /* IE 9 */
     transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 0.3s 1s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 0.3s 1s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
You may also need to add these to your client.php.
HTML:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Thread updated:

Version 2
This one if personally a fav, it loads furni on the steps. (gif so watch)
iTqfS3u02r.gif
You must be registered for see images attach

The furni sprite.
Javascript:
CSS:
HTML:
Follow the same instructions above, to use the furni sprite, you need to change background-image: url(/assets/client/images/furni_sprite.png); where this is located in your directory.
 
Last edited:

n4te

zzz
Oct 27, 2014
669
293
Hiya, using javascript, html and css i created a custom client loading screen,
You must be registered for see images attach

Instructions
  1. Place Javascript anywhere in a JS file called on client.php or on the client.php itself.
  2. Place HTML on client.php near the bottom.
  3. Create a CSS File called loader.css, and call it on the client.php
  4. Download the image logo, or edit the CSS and use your own.
  5. Edit your client.php info, look for "processlog.enabled" change that to 1, and save.
JavaScript:
window.FlashExternalInterface.logLoginStep = function(b) {
    if (b == "client.init.start") {
        document.getElementById('loader_bar').style = "width:10%;";
    }
    if (b == "client.init.core.init") {
    document.getElementById('loader_bar').style = "width:25%;";
    }
    if (b == "client.init.auth.ok") {
    document.getElementById('loader_bar').style = "width:50%;";
    }
    if (b == "client.init.localization.loaded") {
    document.getElementById('loader_bar').style = "width:75%;";
    }
    if (b === "client.init.config.loaded") {
                setTimeout(function() {
                      document.getElementById('loader_bar').style = "width:100%;";
                }, 3000);
        setTimeout(function() {
            $('body').addClass('loaded');
        }, 5000);
    }
}
HTML:
<div id="loader-wrapper" >
    <div class="loader">
         <div id="loader">
            <div class="loading_bar">
                <div class="percent" id="loader_bar"></div>
            </div>
        </div>
    <div class="loader-section section-top"></div>
    <div class="loader-section section-bottom"></div>
    </div>
</div>
Create a directory /assets/client/images/ and save this image, or edit #loader and change the background:url(); to your logo.
You must be registered for see images attach

CSS:
 #loader-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
}
#loader {
     background:url(/assets/client/images/sulake_large.png)top center no-repeat;
     height: 44px;
     width: 300px;
     padding-top:65px;
     text-align: center;
     color:#fff;
     font-size: 20px;
     z-index: 1001;
     display: block;
     position: absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     margin: auto;
         image-rendering:pixelated;
}
.loading_bar {
  display: block;
  border:1px solid #b1b0b0;
  padding:2px;
  height:30px;
  z-index: 1001;
  margin-top:5px;
}
#loader_bar.percent {
  background:#b1b0b0;
  display: block;
  height:100%;
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
width:2%;
}
#loader-wrapper .loader-section {
     position: fixed;
     width: 100%;
     height: 50%;
     z-index: 1000;
         background:#000;
}
#loader-wrapper .loader-section.section-top {
     top: 0;
     left:0;
     right:0;
}
#loader-wrapper .loader-section.section-bottom {
     bottom: 0;
     left:0;
     right:0;
}
/* Loaded styles */

.loaded #loader-wrapper .loader-section.section-top {
     -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateY(-100%);
    /* IE 9 */
     transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper .loader-section.section-bottom {
     -webkit-transform: translateY(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateY(100%);
    /* IE 9 */
     transform: translateY(100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader {
     opacity: 0;
     -webkit-transition: all 0.3s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 0.3s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper {
     visibility: hidden;
     -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
     -ms-transform: translateX(-100%);
    /* IE 9 */
     transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
     -webkit-transition: all 0.3s 1s ease-out;
    /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
     transition: all 0.3s 1s ease-out;
    /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}

You may also need to add these to your client.php
HTML:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
very nice.
 

Joe

Well-Known Member
Jun 10, 2012
4,088
1,915
Version 2 looks great, would be nice to recreate the old old old loading screen though, with the croc I believe? :p
 

Sledmore

Chaturbate Livestreamer
Staff member
FindRetros Moderator
Jul 24, 2010
5,194
3,901
Looks great, really like version two. These styles were always my favourite, the initial r34-r38 loading styles were superb.

Great share.
 

Laynester

a bad bitch
Nov 7, 2018
304
422
this is nice, but i got this error
You must be registered for see images attach
Finally found a fix for this issue, add
JavaScript:
if(typeof(window.FlashExternalnterface) === "undefined") {
        window.FlashExternalInterface = {};
    }
above the loading js :D
 

Liam

Fly and mighty
Staff member
FindRetros Moderator
Apr 10, 2013
1,162
701
I always liked these loading styles. Nice work, looks very good.

Cool release.
 

Users who are viewing this thread

Top