Menu
Forums
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Trending
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Upgrades
Log in
Register
What's new
Search
Search
Search titles only
By:
All threads
Latest threads
New posts
Trending threads
New posts
Search forums
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
Server Development
Habbo Retros
Habbo Releases
Custom loading screen.
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Laynester" data-source="post: 447183" data-attributes="member: 83341"><p>Hiya, using javascript, html and css i created a custom client loading screen,</p><p>[SPOILER="Preview"]</p><p>[ATTACH=full]8530[/ATTACH]</p><p>[/SPOILER]</p><p></p><p><strong>Instructions</strong></p><ol> <li data-xf-list-type="ol">Place Javascript anywhere in a JS file called on client.php or on the client.php itself.</li> <li data-xf-list-type="ol">Place HTML on client.php near the bottom.</li> <li data-xf-list-type="ol">Create a CSS File called loader.css, and call it on the client.php</li> <li data-xf-list-type="ol">Download the image logo, or edit the CSS and use your own.</li> <li data-xf-list-type="ol">Edit your client.php info, look for "processlog.enabled" change that to 1, and save.</li> </ol><p>[SPOILER="Javascript"]</p><p>[CODE=javascript]</p><p>if(typeof(window.FlashExternalnterface) === "undefined") { window.FlashExternalInterface = {}; }</p><p>window.FlashExternalInterface.logLoginStep = function(b) {</p><p> if (b == "client.init.start") {</p><p> document.getElementById('loader_bar').style = "width:10%;";</p><p> }</p><p> if (b == "client.init.core.init") {</p><p> document.getElementById('loader_bar').style = "width:25%;";</p><p> }</p><p> if (b == "client.init.auth.ok") {</p><p> document.getElementById('loader_bar').style = "width:50%;";</p><p> }</p><p> if (b == "client.init.localization.loaded") {</p><p> document.getElementById('loader_bar').style = "width:75%;";</p><p> }</p><p> if (b === "client.init.config.loaded") {</p><p> setTimeout(function() {</p><p> document.getElementById('loader_bar').style = "width:100%;";</p><p> }, 3000);</p><p> setTimeout(function() {</p><p> $('body').addClass('loaded');</p><p> }, 5000);</p><p> }</p><p>}[/CODE]</p><p>[/SPOILER]</p><p>[SPOILER="HTML"]</p><p>[CODE=html]<div id="loader-wrapper" ></p><p> <div class="loader"></p><p> <div id="loader"></p><p> <div class="loading_bar"></p><p> <div class="percent" id="loader_bar"></div></p><p> </div></p><p> </div></p><p> <div class="loader-section section-top"></div></p><p> <div class="loader-section section-bottom"></div></p><p> </div></p><p></div>[/CODE]</p><p>[/SPOILER]</p><p>[SPOILER="CSS"]</p><p>Create a directory /assets/client/images/ and save this image, or edit #loader and change the background:url(); to your logo.</p><p>[ATTACH=full]8531[/ATTACH]</p><p>[CODE=css] #loader-wrapper {</p><p> position: fixed;</p><p> top: 0;</p><p> left: 0;</p><p> width: 100%;</p><p> height: 100%;</p><p> z-index: 1000;</p><p>}</p><p>#loader {</p><p> background:url(/assets/client/images/sulake_large.png)top center no-repeat;</p><p> height: 44px;</p><p> width: 300px;</p><p> padding-top:65px;</p><p> text-align: center;</p><p> color:#fff;</p><p> font-size: 20px;</p><p> z-index: 1001;</p><p> display: block;</p><p> position: absolute;</p><p> top:0;</p><p> bottom:0;</p><p> left:0;</p><p> right:0;</p><p> margin: auto;</p><p> image-rendering:pixelated;</p><p>}</p><p>.loading_bar {</p><p> display: block;</p><p> border:1px solid #b1b0b0;</p><p> padding:2px;</p><p> height:30px;</p><p> z-index: 1001;</p><p> margin-top:5px;</p><p>}</p><p>#loader_bar.percent {</p><p> background:#b1b0b0;</p><p> display: block;</p><p> height:100%;</p><p> -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p>/* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */</p><p> transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p>/* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */</p><p>width:2%;</p><p>}</p><p>#loader-wrapper .loader-section {</p><p> position: fixed;</p><p> width: 100%;</p><p> height: 50%;</p><p> z-index: 1000;</p><p> background:#000;</p><p>}</p><p>#loader-wrapper .loader-section.section-top {</p><p> top: 0;</p><p> left:0;</p><p> right:0;</p><p>}</p><p>#loader-wrapper .loader-section.section-bottom {</p><p> bottom: 0;</p><p> left:0;</p><p> right:0;</p><p>}</p><p>/* Loaded styles */</p><p></p><p>.loaded #loader-wrapper .loader-section.section-top {</p><p> -webkit-transform: translateY(-100%);</p><p> /* Chrome, Opera 15+, Safari 3.1+ */</p><p> -ms-transform: translateY(-100%);</p><p> /* IE 9 */</p><p> transform: translateY(-100%);</p><p> /* Firefox 16+, IE 10+, Opera */</p><p> -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p> /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */</p><p> transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p> /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */</p><p>}</p><p>.loaded #loader-wrapper .loader-section.section-bottom {</p><p> -webkit-transform: translateY(100%);</p><p> /* Chrome, Opera 15+, Safari 3.1+ */</p><p> -ms-transform: translateY(100%);</p><p> /* IE 9 */</p><p> transform: translateY(100%);</p><p> /* Firefox 16+, IE 10+, Opera */</p><p> -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p> /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */</p><p> transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);</p><p> /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */</p><p>}</p><p>.loaded #loader {</p><p> opacity: 0;</p><p> -webkit-transition: all 0.3s ease-out;</p><p> /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */</p><p> transition: all 0.3s ease-out;</p><p> /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */</p><p>}</p><p>.loaded #loader-wrapper {</p><p> visibility: hidden;</p><p> -webkit-transform: translateX(-100%);</p><p> /* Chrome, Opera 15+, Safari 3.1+ */</p><p> -ms-transform: translateX(-100%);</p><p> /* IE 9 */</p><p> transform: translateX(-100%);</p><p> /* Firefox 16+, IE 10+, Opera */</p><p> -webkit-transition: all 0.3s 1s ease-out;</p><p> /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */</p><p> transition: all 0.3s 1s ease-out;</p><p> /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */</p><p>}[/CODE]</p><p>[/SPOILER]</p><p>You may also need to add these to your client.php.</p><p>[CODE=html]<script src="https://code.jquery.com/jquery-1.12.4.js"></script></p><p><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>[/CODE]</p><p></p><p><strong>Thread updated:</strong></p><p></p><p><strong><span style="font-size: 18px">Version 2</span></strong></p><p>[SPOILER="Preview"]</p><p>This one if personally a fav, it loads furni on the steps. (<strong>gif so watch</strong>)</p><p><img src="https://cdn.discordapp.com/attachments/540658239272910848/563028013176848384/iTqfS3u02r.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p>[/SPOILER]</p><p>[SPOILER="Assets"]</p><p>[ATTACH=full]8564[/ATTACH]</p><p>The furni sprite.</p><p><strong>Javascript:</strong> <a href="https://pastebin.com/TGr8Ka6Q" target="_blank">https://pastebin.com/TGr8Ka6Q</a></p><p><strong>CSS: </strong><a href="https://pastebin.com/nLtUF8QB" target="_blank">https://pastebin.com/nLtUF8QB</a></p><p><strong>HTML: </strong><a href="https://pastebin.com/C06N2yNU" target="_blank">https://pastebin.com/C06N2yNU</a></p><p>Follow the same instructions above, to use the furni sprite, you need to change <strong>background-image: url(/assets/client/images/furni_sprite.png);</strong> where this is located in your directory.</p><p>[/SPOILER]</p></blockquote><p></p>
[QUOTE="Laynester, post: 447183, member: 83341"] Hiya, using javascript, html and css i created a custom client loading screen, [SPOILER="Preview"] [ATTACH=full]8530[/ATTACH] [/SPOILER] [B]Instructions[/B] [LIST=1] [*]Place Javascript anywhere in a JS file called on client.php or on the client.php itself. [*]Place HTML on client.php near the bottom. [*]Create a CSS File called loader.css, and call it on the client.php [*]Download the image logo, or edit the CSS and use your own. [*]Edit your client.php info, look for "processlog.enabled" change that to 1, and save. [/LIST] [SPOILER="Javascript"] [CODE=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); } }[/CODE] [/SPOILER] [SPOILER="HTML"] [CODE=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>[/CODE] [/SPOILER] [SPOILER="CSS"] Create a directory /assets/client/images/ and save this image, or edit #loader and change the background:url(); to your logo. [ATTACH=full]8531[/ATTACH] [CODE=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+ */ }[/CODE] [/SPOILER] You may also need to add these to your client.php. [CODE=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>[/CODE] [B]Thread updated:[/B] [B][SIZE=5]Version 2[/SIZE][/B] [SPOILER="Preview"] This one if personally a fav, it loads furni on the steps. ([B]gif so watch[/B]) [IMG]https://cdn.discordapp.com/attachments/540658239272910848/563028013176848384/iTqfS3u02r.gif[/IMG] [/SPOILER] [SPOILER="Assets"] [ATTACH=full]8564[/ATTACH] The furni sprite. [B]Javascript:[/B] [URL]https://pastebin.com/TGr8Ka6Q[/URL] [B]CSS: [/B][URL]https://pastebin.com/nLtUF8QB[/URL] [B]HTML: [/B][URL]https://pastebin.com/C06N2yNU[/URL] Follow the same instructions above, to use the furni sprite, you need to change [B]background-image: url(/assets/client/images/furni_sprite.png);[/B] where this is located in your directory. [/SPOILER] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
Server Development
Habbo Retros
Habbo Releases
Custom loading screen.
Top