New Google Loader

Developer
Bryce Snyder
Size
2,542 Kb
Views
76,912
  1. New Google Loader Previews
  2. New Google Loader HTML Codes
  3. New Google Loader CSS Codes

How do I make an new google loader?

Created with love from the inspiration of Googles new dots!. What is a new google loader? How do you make a new google loader? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

New Google Loader Previews
IQ Test

New Google Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>New Google Loader</title> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>	<span>G</span>	<span>o</span>	<span>o</span>	<span>g</span>	<span>l</span>	<span>e</span>
</h1>
<span class="container">	<div></div>	<div></div>	<div></div>	<div></div>
</span>
</body>
</html>

New Google Loader - Script Codes CSS Codes

h1 { font-family: 'Montserrat', sans-serif; font-size: 4em; text-align: center; letter-spacing: -10px; font-weight: lighter;
}
h1 span:first-child { color: #4285f4;
}
h1 span:nth-child(2) { color: #db4437;
}
h1 span:nth-child(3) { color: #f4b400;
}
h1 span:nth-child(4) { color: #4285f4;
}
h1 span:nth-child(5) { color: #0f9d58;
}
h1 span:nth-child(6) { color: #db4437; -ms-transform: rotate(-20deg); -webkit-transform: rotatee(-20deg); transform: rotate(-20deg); display: inline-block;
}
.container { display: block; width: 122px; margin: 100px auto;
}
div { height: 20px; width: 20px; position: absolute; border-radius: 50%; background: #000; display: inline-block;
}
div:first-child { animation: move 1s ease-in-out infinite alternate; background: #4285f4; margin-left: 0;
}
div:nth-child(2) { animation: move 1s ease-in-out -0.25s infinite alternate; margin-left: 35px; background: #db4437;
}
div:nth-child(3) { animation: move 1s ease-in-out -0.5s infinite alternate; margin-left: 70px; background: #f4b400;
}
div:nth-child(4) { animation: move 1s ease-in-out -0.75s infinite alternate; margin-left: 105px; background: #0f9d58;
}
@-moz-keyframes move { 0% { transform: translateY(-10px); } 100% { transform: translateY(5px); }
}
@-webkit-keyframes move { 0% { transform: translateY(-10px); } 100% { transform: translateY(5px); }
}
@-o-keyframes move { 0% { transform: translateY(-10px); } 100% { transform: translateY(5px); }
}
@keyframes move { 0% { transform: translateY(-10px); } 100% { transform: translateY(5px); }
}
New Google Loader - Script Codes
New Google Loader - Script Codes
Home Page Home
Developer Bryce Snyder
Username brycesnyder
Uploaded July 28, 2022
Rating 4.5
Size 2,542 Kb
Views 76,912
Do you need developer help for New Google Loader?

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!

Bryce Snyder (brycesnyder) Script Codes
Name
Flat Banner Single Pseudo Element
Social Media Animated Buttons
Pure CSS3 Parallax Menu
Simple JQuery Slider
Pure CSS3 Viking Mace
Multi Share Button in Pure CSS
Pure CSS Modalbox
Full Screen Application Animation
Pure CSS Radio Buttons Pseudo Checked Cards
PURE CSS3 Vector Ribbon Banner
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!