How to make Google’s AdSence/AdMob Page Loader with CSS and HTML

A Short Introduction

Hello guys, today we will make the Material loader that Google uses in AdSence, AdMob and Various other Web Apps. We are always interested in having a look at others cool stuffs. Well, this code that I made is interesting and only uses less space. The content / Files that I provide you here are free to download and I always appreciate you downloading it. This is a recreation of the Google’s AdSence Loader.

If you are a member of Google AdSence or Google AdMob, you must have seen the loader. It has a loader in Center and a tiny bar on top which runs across left to right in the window.

The Code for AdSence Material Loader

1. Let’s do a Quick Markup

<!DOCTYPE html>
<!-- Property is Free to use from spookycodes.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Material App</title>
    <link rel = "stylesheet" href="main.css" type = "text/css"/>
</head>
<body>
    <div class="loader" id = "loader">
        <div class="loader-h">
            <div class="inner-piece"></div>
        </div>
        <div class="app-icon">
            <img alt = "App Icon" src= "icon.png"><!-- Replace the src with yours ! -->
        </div>
    </div>
</body>
</html>

Now, you will have to create a “icon.png” in the root path of document and write the following css code and name it as “main.css”. We will need to place it along the “icon.png” file.

2. Let’s Write a CSS code for Mark Up

.loader{
    position: fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader .loader-h{
    width: 100%;
    position: absolute;
    top:0;
    right:0;
    left:0;
    height: auto;
    background-color: #f1dede;
    box-shadow: inset 0 0 5px -3px black;
}
.loader .loader-h .inner-piece{
    width: 50px;
    min-height:4px;
    background:#4285f4;
    border-radius: 2px;
    animation:w-inc 1s linear infinite;
}
@keyframes w-inc{
    0%{
        width: 0;
        margin-left:0;
    }
    100%{
        width:100%;
        margin-left:100%;
    }
}

The Plan

We fill fix the position of the loader throughout the window and add a icon into it. We will create a flex-box for the complete loader components holder and position the icon to center.

Since the position:fixed acts as position:relative if we have inner elements with absolute nature, we can make the top animated bar holder. We create a holder for it and add a inset box-shadow. Then, we will place the inner component (The Blue bar that moves). We will define an animation for the bar. It will run infinite with linear animation from left with “0 width and 0 margin-left” to “100% width to 100% margin-left”. The colors can be of your interest.

Leave a Reply

Your email address will not be published. Required fields are marked *

www.000webhost.com