Build CSS full page loader

Published by www.coding30.com
page loader

Introduction:

A CSS page loader is a visual element displayed on a web page to indicate that content is being loaded. It's a way to keep users informed that something is happening in the background, especially when dealing with asynchronous operations like fetching data or navigating between pages.

Block of code explanation:

  • This is the simple HTML and CSS3 page loader code.

    • Code here... 

    							
    <!doctype html>
    <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="www.coding30.com">
        <meta name="generator" content="www.coding30.com">
        <title>coding30.com | css full page loader</title>
    <style>
    .loading {
        position: fixed;
        z-index: 999;
        height: 20em;
        width: 20em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    .loading:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(10, 10, 10, 0.2), rgba(0, 0, 0, 0.2));

        background: -webkit-radial-gradient(
        rgba(10, 10, 10, 0.2),
        rgba(0, 0, 0, 0.2)
        );
    }

    </style>
        </head>
        <body>
    <div class="loading">
    <img src="img/loading-splash.gif" style="height:300px;width:300px;">
    </div>
        </body>
    </html>

    Preview...

    page loader


Conclusion:
  • Page loader is the very use-full for any web application. Sometime if internet is slow then website content not fully load then this situation page loader play the best roll with help of little javascript show website content without lose user experience.
  • CSS page loaders are valuable elements that enhance user experience by providing visual feedback during content loading. Utilizing animations and transitions, these loaders communicate to users that the webpage is actively processing information.