Google Inspired CSS Preloader

Developer
Matt Litherland
Size
3,008 Kb
Views
46,552
  1. Google Inspired CSS Preloader Previews
  2. Google Inspired CSS Preloader HTML Codes
  3. Google Inspired CSS Preloader CSS Codes
  4. Google Inspired CSS Preloader JS Codes

How do I make an google inspired css preloader?

Simple Google inspired CSS preloader.Follow me on Twitter. What is a google inspired css preloader? How do you make a google inspired css preloader? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Google Inspired CSS Preloader Previews
IQ Test

Google Inspired CSS Preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Inspired CSS Preloader</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/251px-Logo_Google_2013_Official.svg.png" alt="Google Logo" />
<div class="preloader"> <i>.</i> <i>.</i> <i>.</i>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Google Inspired CSS Preloader - Script Codes CSS Codes

body, html { height: 100%; width: 100%; text-align: center; padding-top: 30px;
}
img { max-height: 46px;
}
.preloader { position: absolute; top: 120px; left: 50%; margin-left: -35px; height: 50px; width: 70px; overflow: hidden;
}
i { display: block; width: 16px; height: 16px; background: black; border-radius: 16px; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; opacity: 1; -webkit-transform: translate3d(60px, 0, 0); overflow: hidden; text-indent: -9999px; border: 2px solid white;
}
i:nth-child(1) { background: #d14836; -webkit-animation: google 1.75s ease-in-out infinite; -moz-animation: google 1.75s ease-in-out infinite; -ms-animation: google 1.75s ease-in-out infinite; -o-animation: google 1.75s ease-in-out infinite; animation: google 1.75s ease-in-out infinite;
}
i:nth-child(2) { background: #e9b330; -webkit-animation: google 1.75s ease-in-out infinite 0.3s; -moz-animation: google 1.75s ease-in-out infinite 0.3s; -ms-animation: google 1.75s ease-in-out infinite 0.3s; -o-animation: google 1.75s ease-in-out infinite 0.3s; animation: google 1.75s ease-in-out infinite 0.3s;
}
i:nth-child(3) { background: #4285f4; -webkit-animation: google 1.75s ease-in-out infinite 0.6s; -moz-animation: google 1.75s ease-in-out infinite 0.6s; -ms-animation: google 1.75s ease-in-out infinite 0.6s; -o-animation: google 1.75s ease-in-out infinite 0.6s; animation: google 1.75s ease-in-out infinite 0.6s;
}
@-webkit-keyframes google { 0% { opacity: 0; -webkit-transform: translate3d(60px, 0, 0); -moz-transform: translate3d(60px, 0, 0); -ms-transform: translate3d(60px, 0, 0); -o-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } 30% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-300px, 0, 0); -moz-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); -o-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); }
}
@-o-keyframes google { 0% { opacity: 0; -webkit-transform: translate3d(60px, 0, 0); -moz-transform: translate3d(60px, 0, 0); -ms-transform: translate3d(60px, 0, 0); -o-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } 30% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-300px, 0, 0); -moz-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); -o-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); }
}
@keyframes google { 0% { opacity: 0; -webkit-transform: translate3d(60px, 0, 0); -moz-transform: translate3d(60px, 0, 0); -ms-transform: translate3d(60px, 0, 0); -o-transform: translate3d(60px, 0, 0); transform: translate3d(60px, 0, 0); } 30% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 70% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-300px, 0, 0); -moz-transform: translate3d(-300px, 0, 0); -ms-transform: translate3d(-300px, 0, 0); -o-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); }
}

Google Inspired CSS Preloader - Script Codes JS Codes

// Twitter
// @mattsince87
Google Inspired CSS Preloader - Script Codes
Google Inspired CSS Preloader - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4
Size 3,008 Kb
Views 46,552
Do you need developer help for Google Inspired CSS Preloader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Litherland (mattsince87) Script Codes
Name
SCSS Social Icons Flat
Ultimate Pop-Out Menu
Wishlist Toggle Button
Cool Hidden Drawer
Smooth Anchor Scrolling
Vertical Align Images - Explained
Animated SVG Path
Responsive Flot Chart
Slick Two Part Form
Node Waves
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!