Mon - Sun 8.00 AM - 8.00 PM
edu@teknowize.com
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Google Loading Using HTML and CSS
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html> <head> <title>Google Loading Using HTML and CSS</title> </head> <body> <h1 class="main-heading">Google Loading Using HTML and CSS</h1> <div class="loader-main-div"> <div class="common-circle blue-circle"></div> <div class="common-circle red-circle"></div> <div class="common-circle yellow-circle"></div> <div class="common-circle green-circle "></div> </div> </body> </html>
CSS
.main-heading { color: rgb(6, 2, 114); text-align: center; padding: 3rem; } body { overflow: hidden; } .loader-main-div { width: 100%; display: flex; justify-content: center; position: absolute; align-items: center; overflow: hidden; } .common-circle { width: 20px; height: 20px; margin: 10px; border-radius: 50%; } .blue-circle { background: #4185F4; animation: ballMoves 1000ms ease-in-out infinite; } .red-circle { background: #EA4235; animation: ballMoves 1000ms 100ms ease-in-out infinite; } .yellow-circle { background: #F9BD00; animation: ballMoves 1000ms 200ms ease-in-out infinite; } .green-circle { background: #33A853; animation: ballMoves 1000ms 300ms ease-in-out infinite; } @keyframes ballMoves { 0% { transform: translateY(-10px); } 50% { transform: translateY(10px); } 100% { transform: translateY(-10px); } }
JS
Output
Mon -
Sun 8.00 AM - 8.00 PM
edu@teknowize.com
Mon -
Sun 8.00 AM - 8.00 PM
edu@teknowize.com
