How to make a CSS page pre-loader which transitions into a welcome screen?

by

I’m new to web-dev, have found many templates for CSS loading animations but struggle to find the corresponding JS which makes the animation run indefinitely till the page has loaded. After this, I want the animation to end in a way that introduces the welcome screen. Is there a way to incorporate this into the CSS?

pseudo-code:

if(!loaded){
   CSS-loop()
} else {
   CSS-welcome()
}
showPage()

Many thanks!

42 thoughts on “How to make a CSS page pre-loader which transitions into a welcome screen?”

  1. Hy!

    If I understand your question you want to show loading animation when you change the page or show msg when load the homepage for the first time.

    Loaders are a nice features if your page contains large files, and needs time to load the whole content.

    There are javascript frameworks (Vue, React, Angular) which can implement this behavior. But this behavior happens for 2 reasons:

    • Feedback for the user, that the page is loading
    • The web application is getting the resources from the server (html/css) and hasn’t got the resources yet.

    When your web browser send a HTTP request to a server to get the pages resources it could take some time. And this is the time window when the loader comes in handy.

    But if you use just html + css + javascript the whole loading process is irrelevant. As I mentioned when you switch from previous page to new page, you have some time to show the loading panel. But this gap is only can filled by a framework. Without a framework the whole page is changing. And this means there is no chance for a loader to show.

    But to practice web dev you can make the following:

    <!-- Loader window -->
<div style="display: none;">
    <!-- The gif or css animation -->
</div>

<!-- Menu button -->
<button onclick="loadAndSwitch('login')">Log in</button>

<script>

    function loadAndSwitch(goTo){

        // Show loader immediately
        document.getElementById('loader').display = 'block';

        // After 0.5 sec go to the page
        setTimeout(SwitchPage(goTo), 500)
    }

    function SwitchPage(goTo){
        document.location.href = 'http://yourpath/' + goTo + '.html';
        let link = 'http://127.0.0.1:5500/' + goTo + '.html'
        location.replace(link)
    }

</script>

    This will show the loader first, and after loads the new page.

    This solution gives some kind of feedback for the webpage visitor, but it won’t improve your SEO.

    Or on the other hand if you want to show the „welcome msg” after the page is loaded there is a solution too.

    Wrap the whole content inside a div and make it’s style to display none.

    …and make a div as sibling of the wrapper (same leve, under or above the wrapper) which is displayed. And inside it you can place the welcome msg.

    And make a javascript timeout function which hides the msg and shows the content.

        <!-- Welcome msg -->
    <div id="msg">
        <!-- Hello :) -->
    </div>

    <!-- Page content -->
    <div id="content" style="display: none">
        <!-- Content -->
    </div>


    <script>

        //whit this line the function is called after 2 sec
        setTimeout(hideMsg(), 2000);

        //set the functuon
        function hideMsg(){
            document.getElementById('msg').style.display = 'none';
            document.getElementById('content').style.display = 'block';
        }

    </script>

    If you set transition time in the css and add opacity to the wrapper which holds the content then the result could be nice as well.

    For fade in animation:
    https://stackoverflow.com/a/45023755/14893737

    …or reverse if you want to apply this on msg div too.

    Good luck! 🙂

    Reply

Leave a Comment