Description:-

Hello everyone! In this video, you are going to learn how to Awesome Web Page Preloader - Using HTML & CSS.

Let's see how to create an Awesome Web Page Preloader - Using HTML & CSS.

You Might Also Like ➝

• Awesome Web Page Preloader - Using HTML & CSS

• Flame Effect Text - Using HTML & CSS

• The Glassmorphism Social Button | Using HTML & CSS

• 12 Best WordPress Themes for Your 2021 Projects

• Top 40 HTML Interview Questions | HTML5 Interview

• 12 Best Tips For Learning How-To-Code In Easy And Effective Way

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Awesome Web Page Preloader - Using HTML & CSS | Codexbaba

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <span class="loader"><span class="loader-inner"></span></span> </body> </html>

CSS

body, html{ height: 100%; text-align: center; } body{ background-color: black; } .loader{ display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #fff; top: 50%; animation: loader 2s infinite ease; } .loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fff; animation: loader-inner 2s infinite ease; } @keyframes loader { 0% { transform: rotate(0deg); } 25% { transform: rotate(100deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes loader-inner { 0% { height: 0%; } 25% { height: 0%; } 75%{ height: 100%; } 100% { height: 0%; } }

Awesome Web Page Preloader - Using HTML & CSS | Codexbaba

Description:-

You Might Also Like ➝

Source code:-

Awesome Web Page Preloader - Using HTML & CSS | Codexbaba

HTML

CSS

Post a Comment

Contact Form