Skip to main content

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 www.techify.club --><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.

Comments

Popular posts from this blog

Install LineageOS 16.1 on SM-J610(x) Samsung Galaxy J6 Plus

Installation Unlock the Bootloader Unlocking the bootloader involves complete removeal of your files. So, do a backup for your important files. Go to Settings -> About Phone -> Software Information Tap on “Build Number” 7 Times Developer option will be enabled Go to Settings -> Developer Options (At the bottom) Enable “OEM Unlocking”. You have to format your phone. Risk !!! Proceed the steps below if you are ready to take the risk of voiding your warranty (KNOX 0x1) It’s always better to do after your device warranty is over. Download Necessary Files I have made a All-in-One complete Installation ZIP file. Download Here or Click Button Below All-In-One ZIP Official Link Now, extract all the files to a folder. Boot Into Download Completely Power-Off your device Remove every cables connected to the device Press the Volume-Up & Volume-Down simultaneously. Now connect your phone to the COMPUTER via Micro-USB Cable Read the instruction shown there for a moment. Now, press the

Install Lineage OS 16, TWRP, Gapps on Samsung Galaxy Tab 10.1 2019 (SM-T510)

Introduction Let’s get started on installing this wonderful ROM RISK ! Make sure you are ready to take the risk as this may can lead to complete device bricking. Download the All-in-one zip file Download full installation files as zip Steps for installation Unlock bootloader Disconnect the USB cable Power off the device Press and hold Volume Up & Down keys Insert USB cable Flash TWRP Open Odin Click on AP Select TWRP .md5 file inside the zip I asked you to download Click on start near to bottom of odin window Flash Multidisabler Copy the multidisabler file in the zip I asked you to download into your SD card. Boot to TWRP and browse and swipe to install multidisabler zip file. Flash Lineage OS with Odin As I mentioned about installing the TWRP recovery above, browse the lineage os “.md5” file as your AP and hit on start Install Gapps Boot into TWRP recovery Install gapps “.zip” file as we installed the multidisabler. Boot into Lineage OS 16 !

Fix "Post processing of the image failed" - Wordpress Error (All Solutions)

Video guide Debugging the issue There is a file at /var/log/apache2 which logs all the errors that happen on your websites. tail -f /etc/apache2/error.log This will list your errors on your apache websites real-time. See the video above to know how I debugged and solved this error. All Solutions 1. Install php-mbstring module SSH into your server and type: sudo apt-get install php-mbstringsudo service apache2 reloadsudo service apache2 restart This will install the module for you and most probably will solve this issue for you. Remember: On the video above you might have seen that doing this didn’t work right away for me. But only after continuos restart and reload of apache server. Or you might need to just reboot your server with: sudo reboot Update your php.ini First find your install php version: php -v Now that you know your php version, cd into your php version at: cd /etc/php/(php_version) Now, edit you php.ini sudo apt install nano # If nano not installed on your servernano /et