[Tutorial] Preloader Splash Page

Website loading speed is a crucial thing to keep an eye out when you develop a project. Using heavy images, large JavaScript files, and having a bloated site in general will result in slow loading speeds for the average user. This might frustrate them, which might force the user to leave the site before they actually have had a look at the content. In the worst case scenario, while the site is loading it might not even display anything, and for a slow loading site and the user might end up leaving.

[flde_special_heading heading_size=”h3″]You can check out and grab the finished code from my codepen.[/flde_special_heading]

[codepen_embed height=”264″ theme_id=”20522″ slug_hash=”LprGLb” default_tab=”result” user=”LordFren”]See the Pen <a href=’http://codepen.io/LordFren/pen/LprGLb/’>A simple preloader splash page</a> by Lord Fren (<a href=’http://codepen.io/LordFren’>@LordFren</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

This code has a simple animation built in. You can use it or you can replace it with your own.

[flde_special_heading heading_size=”h4″]The HTML[/flde_special_heading]

<div class="loader-wrap">
  <div class="loader">
    <div class="loader-logo">
      Put your logo, or custom text here!
    <!-- Custom Loading Animation -->
    <div class="loader-inner pulse-ball">
    <!-- Custom Animation End-->

Paste this just after the opening <body> tag in your HTML file. We will be using CSS to style all of the elements and animate them. Make sure to not include large files or a lot of graphics here. This has to be as light as possible, so it loads almost instantly for any user.

[flde_special_heading heading_size=”h4″]The CSS[/flde_special_heading]

This is the part where most of the magic happens so let me go through all the important steps.


.no-js .loader-wrap {
  display: none;
.js .loader-wrap{
  display: block;

This part is not mandatory, but I have included nonetheless.

If you are using a browser feature detect method, like Modernizr, you can use this snippet to hide or display the loader overlay depending if the JavaScript is turned Off or On in the browser of the user. If you do not already import detects, you can skip this step. Most of the users will have JavaScript enabled by default and it takes a lot of effort to turn it off nowadays for little to no gain.


  background-color: #f05a28;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  z-index: 9999;

This is the colored background of our loader. position:absolute; takes the contents and the <div> out from the normal flow of the website. We set it to 100% width and 100% height to ensure it will cover the entire site and add a z-index: 9999; to make sure it is always on top.


.loader-wrap .loader {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;

We, again, call for the position:absolute; property to help us position this element to the centre of any screen with top:50%; and left:50%;. If you stop now and check the results you will see that it is not in the centre. This is because we did not take the element width and height into account when we positioned them.

We can actually branch off into 2 directions to solve this problem. We will go over both of them.

For the older method to work we needed to know the exact dimensions of the <div> and add negative margins for it to display in the exact centre. Let’s say this <div> was 200px in width and 100 px in height. What we needed to do was divide these by two and add that as a negative margin to the <div>. For the left margin we take the width of the <div>. 200/2=100 so we needed to add margin-left:-100px;. For the top margin we take the height of the <div>. 100/2=50 so we needed to add margin-top:-50px;. However (and lucky for us!) this is in the past now.

Nowadays we have evolved from the caveman era of CSS to a more civilized solution where we don’t need to know the exact dimensions of the <div> element because we can apply transform: translate(-50%, -50%);. The transform property is always relative to the element that it is being applied to and translate is how you move the <div> into place. It basically calculates the dimensions of the <div> and moves them by a percentage based off of these measurements. Pretty nifty, huh?

[flde_special_heading heading_size=”h4″]The jQuery[/flde_special_heading]

$(window).load(function() {

Let me explain the above code in simple terms. After the site ($(window)) finished loading all resources, triggers a function to hide (.fadeOut("slow")) the pre-loader overlay from sight. Making the waiting time and transition easy. I left the fade out animation simple, but if you wish you can add your own animations to make the overlay appear or hide.

[flde_special_heading heading_size=”h4″]The conclusion[/flde_special_heading]

As you can see this is a really easy and quick way to add a pre-loader splash page to your website. Adding this feature to your site will make the experience more pleasant for people who have slower connection speeds.

There are multiple ways to expand on this simple solution. For example, you can add your own animations for when the site finishes loading and the overlay is going to be hidden. Feel free to add your own loading animation and experiment with other functions and features.

Let me know what you think! Share your thoughts and implementations with me on Twitter @LordFren.



The previous version of the code used Absolute positioning (position: absolute;) which caused a few issues:

  • Unless you used a full height page (no scrolling) the scrollbar appeared
  • If you were scrolled down and refreshed the loader did not follow you, meaning it looked broken.

I have replaced the code with position:fixed this will make sure that the overlay will always cover the site completely.

Known issues

If the JavaScript is disabled in the browser this method will leave the site hanging… (Who does this?! – Editor).

To ensure compatibility for users without JavaScript you should always include Modernizr or similar piece of code to ensure JavaScript support.

The scrollbar is always visible on pages that are larger than the viewport.

This is not really an issue but if you want to remove the scrollbar you can expand the script a bit.

  • Add an overflow:hidden; to the body tag to disable scrollbars altogether.
  • Using the already added JavaScript you can re-enable the overflow after the loading is done by setting overflow:auto;
$(window).load(function() {
  $("html, body").css('overflow', 'auto'); 



New opportunity arises! Tube Alert

How exciting! I have just been recruited to work with the amazing people over at Tube Alert. Tube Alert is a mobile app that builds upon the foundation of YouTube and expands upon its functionality. The main focus of the app is to make YouTube better then what it currently is and expand its functionality. Specifically, one of the issues is where some subscribers don’t receive notifications about their favourite YouTuber’s newest video uploads. This results in subscribers missing out on some new content.

My responsibilities will include graphics design for the app, website and promotional materials. I am also tasked with improving the User Experience and graphical fidelity of their mobile app.

I am really looking forward to this project. It is a really interesting opportunity to further advance my skills in User Experience Design and Graphics Design.

September Status!

August and September were incredibly busy months for me. Some of the things I worked on during the past couple months will be shared more in detail later. They will most definitely be showcased on my upcoming portfolio. I am getting more and more excited to bring you my portfolio. However, I just wanted to let you guys know that I am alive and well; working as hard as ever to bring more quality content your way. In the meantime, here are some quick notes on the things that are currently going on and what I am working on!

My work with MCProHosting and Beam is really amazing! I wish I could share more details regarding the upcoming features, but I cannot at this stage. All I can say is that there were really hard UX problems to solve, which required me to dig deep in my studies to find some really creative solutions.

During the last week or so, I have started working on a new case study. I play Aion in my free time. Aion requires me to use a launcher called Gameforge Live. Since I am a UX and GUI expert, I noticed some problems with this particular piece of software. I decided that am going to do a case study on the launcher focusing on UX and Graphic Design. I will outline some of the most striking problems. My aim is to improve the usability of the software and remove some UX problems to make the launcher more appealing for the users.

I have also given some thought to developing my own game in the future. To that end, I have started the process of enrolling in Game Design courses. To further this, I have also continued my studies in concept art and digital illustration/painting. These skills will come in handy during the development of my games and many other projects. I am already seeing how these skills have proved themslves for clients who wanted Game UIs and graphic work. I believe I will be able to allocate a little more time to expanding these skills soon. Either way, it is something I am very interested in!

I have managed to land new projects that are very interesting to me in their nature. One project is a complete GUI art for an upcoming mobile game. The other is graphics heavy site for a comic strip.

I have sent out the first round of inqueries to my clients regarding portfolio participation. I will be sending the next round shortly. Please expect an e-mail from me in the upcoming weeks. I expect the portfolio data-gathering phase will be done by the end of October.

Stand by for more and as always: Keep it AWESOME!


Portfolio coming soon

I’ve started to get in touch with most of my major clients and asked them to give me testimonials, and asked for their permission to showcase some or all of the works I have done for and with them in my portfolio. Some of them have already responded kindly to my request, other have denied it. Either way, I will keep poking my clients for permissions and testimonials for my site. If you are one of those clients who has not been contacted yet, please be patient.

When I contact a client for testimonials and portfolio elements I send them the full showcase design for their particular project.  I write the introduction text, the showcase display texts cut images and such. These take some time, so don’t think I have forgotten you. I am just busy with work and pre-building all the elements to best represent the work we have done together.

Great Customer Support From Adobe!

“Adobe Photoshop CC is not responding.” This is all I got to go with. I could have waited for a response from the software or I could have sent a report to Microsoft but we all know that those are not real options. I don’t even know what the “Report problem” button does or if it even works or not. So I did what every person would do: Google it. Luckily it seems this is a common issue, but with multiple sources so naturally it would have multiple recommended solutions.

I have tried many suggested solutions, here is a brief list:

  • Licence reset
  • Driver re-install
  • Driver down- and up-grade
  • Removing and installing Creative Cloud
  • Removing and installing Photoshop

Contacting Adobe Live Support for help

All these had no success at all. After 3 hours of unsuccessful attempts I contacted Adobe Support on the verge of true panic as I had 2 deadlines that day, and half of my working day has already passed away with panic and frustration. I was preparing to cancel my after work gaming session and chill time to catch up to my timetable.

I used Adobe’s live support. The first person with whom I got in touch with was very helpful. She asked questions to see if I might have missed a a few basic methods of restoring the software suite to working order, but she quickly noted that I have managed to get into a bad situation that she could not help me out of herself. So She escalated my ticket to a higher level Tech Support representative.

[flde_special_heading heading_size=”h3″]at this point I was so desperate  that I would have probably sold my soul to the first bidder who restored my Adobe suite to a fully working condition[/flde_special_heading]

The new support representative asked me few basic questions like: ‘Problems encountered?’ and the methods I had tried to fix said problems. After a few lines of conversation he asked me if I would allow him to take control over my computer to see if he can fix the problem quickly. At this point, I would have gladly sacrificed a goat or named my first-born after him. I agreed to this, even though I don’t like it when people try to poke around my machine. He gave me a short code and a link to download a specialized desktop software from. Then we got started!

Path to Figuring Out the Crash

The software was a Java application that I downloaded and installed on my machine (ewwww… Java). Please note that under normal circumstances I would have just instantly deleted this software as I don’t trust Java as far as I can throw it, but at this point I was so desperate that I would have probably sold my soul to the first bidder who restored my Adobe suite to a fully working condition. After the installation, I copy & pasted the code, and started the session.

I have to admit: I was very surprised. I run Windows on my native language (Hungarian) so I expected the supporter to just give up and give me the instructions how to resolve this problem. But au contraire! He navigated my Hungarian Windows with dual monitors like he was the one who set it up and had used it for months now. It took the representative all of 2 minutes to repair and restore my Creative Cloud software and all related apps to full working condition.

The supporter then opened up a few PSD-s and images in Photoshop to make sure that it was in full working order, after which he signed off. The installed remote desktop app reported that the connection was closed and asked me if I want to remove it from my computer. I clicked ‘Ok’, and the software removed itself from my PC. Every file and registry entry was removed without a trace; which was a really nice surprise.

So what should you do if you get this message: “Adobe Photoshop CC is not responding”?

  1. Close down Adobe Creative Cloud.
  2. Hit ‘Windows BTN’ + ‘r’ <- The run command dialogue.
  3. %appdata%
  4. Navigate to this folder: ‘C:\Users\username\AppData\Roaming\Adobe\Creative Cloud Libraries\LIBS’
  5. Find this file: ‘librarylookupfile’
  6. rename it to ‘old_librarylookupfile’
  7. Restart Adobe CC.

This should restore your adobe applications to working order (granted it will only work if your source of the problem is the same is mine).

[flde_special_heading heading_size=”h4″]Please note that there may be more problems that cause similar unresponsive programs. Most commonly, the graphics driver causes issues with the application. The above solution is just one of many possible resolutions to a problem.[/flde_special_heading]
[flde_special_heading heading_size=”h4″]If you feel your are stuck don’t hesitate to contact Adobe Live Support for help![/flde_special_heading]

The Conclusion

In any case, I have to give Adobe a nice cookie for this. While the issue is unique to Adobe, they still have a very well trained crew of experts to help you solve any issue and quickly get back to your work. This premium quality support is well worth the price of the CC suite.  Especially if you consider that you are making your honest living using their amazing software to begin with. A good quality support for a premium software and services is expected and much appreciated to have.


Hello Universe!

It is an incredible feeling when you launch your site. It is less incredible to know that while it is technically working, the site still needs a lot of polish and more functions need to be implemented. I believe it will be an on-going process for a fair while.

However, the most important thing is that my site is up and running. I am excited that I have gotten the blog system implemented already! Hopefully, I can finalize the projects and portfolio sections during the coming months.

This site is an incredible adventure for me.

When I first launched my site, it was merely a simple contact form. But as version numbers grew and years passed it started to grow into something else. We are at the XIX version of this site by now, and it has changed a lot. The reason behind so many versions is simple: I am never satisfied with the work I do for myself. I am probably my own worst client.

I will write up a few tips for designers on design and how to make their own website in the future. I hope that those tips and guides will help other designers avoid the pitfalls that I fell in as I was learning.

I plan to blog quite a bit often from now on; and plan to do a lot of cool things with this site in the future. And finally, hopefully, no more design changes! At least not for 4 years! I promise! ;)