Google Plus loading animation in pure CSS
How do I make an google plus loading animation in pure css?
This animation is similar to what Google Plus show while opening notification bell ( ? ). This is created in pure CSS and using single DOM element so that any existing element can be used to show this animation by just toggling the class.. What is a google plus loading animation in pure css? How do you make a google plus loading animation in pure css? This script and codes were developed by Girish Sharma on 31 July 2022, Sunday.
Google Plus loading animation in pure CSS Previews
Google Plus loading animation in pure CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Plus loading animation in pure CSS</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /** * This work is licensed under the Creative Commons * Attribution 3.0 Unported License. To view a copy * of this license, visit http://creativecommons.org/licenses/by/3.0/. * * Author: Girish Sharma <[email protected]> */
/* Demo specific styles start */
body { background: #444;
}
p { font: 18px Roboto,arial,sans-serif; color: rgb(64,64,64); position: absolute; top: calc(50% - 150px); padding: 20px 100px 300px; left: 50%; transform: translateX(-50%); margin-right: -50%; background: rgb(229, 229, 229);
}
p:before { border-style: dashed dashed solid; border-color: transparent transparent rgb(229, 229, 229); border-width: 0px 10px 10px; content: ''; position: absolute; top: -10px; left: calc(50% - 10px);
}
p:after { position: absolute; top: -40px; left: calc(50% - 12px); height: 30px; width: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABRklEQVRIDe1VOwrCQBA1YmNnJxYKFh5C0NbD2HgJL2DhKWxFUOy0EcQreAMRLNQqvqdZCENmM2rwgw68bGbe7L7NbHY3CMMw9w7Lv0OUmn/hl1X+K0rdRzkOANunLbhjO8X3XfCssqXULYiMhBB9xh83frGCAuJDwGfkmaeNocYLnikPwHWBEzADVsAeKAFNoAOQZ9nZ3mXaGrOMC+AIcAJbQFodgR5QBNrAEjCbtsYckDYGkkTJMT7hC8zl3zzDUxPmF9A2t0Z9riPG5auJktCEy1HiTnYQvuNdvqB1VxPWe2TE/IUzKmT6MB9V6mr6fBMzKolRLSjO2Qb8KfCIsR/7q+dznJNHZvzq0+aaFjddmfKSMHVKU7bw1p+LtxOr4TC3DO7Nidfd814DNwfOUUvftJZanlxj7ySzJK2lzlLzOtbvCV8A4iFTEBBgTIcAAAAASUVORK5CYII=); content: '';
}
.loader-gplus { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px);
}
/* Demo specific styles end */
.loader-gplus { height: 50px; width: 50px; border-radius: 25px; animation: rotate 2.4s linear infinite;
}
.loader-gplus:before, .loader-gplus:after { position: absolute; width: 50px; height: 25px; right: 0px; border-radius: 50px 50px 0 0; z-index: 2; content: ''; animation: color-switch 2.4s linear infinite;
}
.loader-gplus:after { transform-origin: 0% 100%; animation-name: unfold, color-shift; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; animation-duration: .6s, 2.4s;
}
@keyframes rotate { 0.0001% { transform: rotateZ(0deg); background-color: rgb(58,123,247); } 25% { transform: rotateZ(0deg); background-color: rgb(58,123,247); } 25.0001% { transform: rotateZ(90deg); background-color: rgb(222,74,66); } 50% { transform: rotateZ(90deg); background-color: rgb(222,74,66); } 50.0001% { transform: rotateZ(180deg); background-color: rgb(255,214,74); } 75% { transform: rotateZ(180deg); background-color: rgb(255,214,74); } 75.0001% { transform: rotateZ(270deg); background-color: rgb(33,173,100); } 100% { transform: rotateZ(270deg); background-color: rgb(33,173,100); }
}
@keyframes unfold { to { transform: rotateX(180deg) rotateZ(0deg); }
}
@keyframes color-switch { 0.0001% { background-color: rgb(222,74,66); } 25% { background-color: rgb(222,74,66); } 25.0001% { background-color: rgb(255,214,74); } 50% { background-color: rgb(255,214,74); } 50.0001% { background-color: rgb(33,173,100); } 75% { background-color: rgb(33,173,100); } 75.0001% { background-color: rgb(58,123,247); } 100% { background-color: rgb(58,123,247); }
}
@keyframes color-shift { 0.0001% { background-color: rgb(58,123,247); border-bottom: 1px solid rgb(58,123,247); } 12.5% { background-color: rgb(40,95,195); border-bottom: 1px solid rgb(45,105,200); } 12.5001% { background-color: rgb(232,120,115); border-bottom: 1px solid rgb(232,120,115); } 25% { background-color: rgb(222,74,66); border-bottom: 1px solid rgb(222,74,66); } 37.5% { background-color: rgb(230,107,99); border-bottom: 1px solid rgb(230,107,99); } 37.5001% { background-color: rgb(255,222,123); border-bottom: 1px solid rgb(255,222,123); } 50% { background-color: rgb(255,214,90); border-bottom: 1px solid rgb(255,214,90); } 62.5% { background-color: rgb(255,222,123); border-bottom: 1px solid rgb(255,222,123); } 62.5001% { background-color: rgb(25,140,74); border-bottom: 1px solid rgb(25,140,74); } 75% { background-color: rgb(33,173,100); border-bottom: 1px solid rgb(33,173,100); } 87.5% { background-color: rgb(82,189,132); border-bottom: 1px solid rgb(82,189,132); } 87.5001% { background-color: rgb(82,148,247); border-bottom: 1px solid rgb(82,148,247); } 100% { background-color: rgb(58,123,247); border-bottom: 1px solid rgb(58,123,247); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p>Google+ notifications</p>
<div class="loader-gplus"></div>
</body>
</html>
Google Plus loading animation in pure CSS - Script Codes CSS Codes
/** * This work is licensed under the Creative Commons * Attribution 3.0 Unported License. To view a copy * of this license, visit http://creativecommons.org/licenses/by/3.0/. * * Author: Girish Sharma */
/* Demo specific styles start */
body { background: #444;
}
p { font: 18px Roboto,arial,sans-serif; color: rgb(64,64,64); position: absolute; top: calc(50% - 150px); padding: 20px 100px 300px; left: 50%; transform: translateX(-50%); margin-right: -50%; background: rgb(229, 229, 229);
}
p:before { border-style: dashed dashed solid; border-color: transparent transparent rgb(229, 229, 229); border-width: 0px 10px 10px; content: ''; position: absolute; top: -10px; left: calc(50% - 10px);
}
p:after { position: absolute; top: -40px; left: calc(50% - 12px); height: 30px; width: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABRklEQVRIDe1VOwrCQBA1YmNnJxYKFh5C0NbD2HgJL2DhKWxFUOy0EcQreAMRLNQqvqdZCENmM2rwgw68bGbe7L7NbHY3CMMw9w7Lv0OUmn/hl1X+K0rdRzkOANunLbhjO8X3XfCssqXULYiMhBB9xh83frGCAuJDwGfkmaeNocYLnikPwHWBEzADVsAeKAFNoAOQZ9nZ3mXaGrOMC+AIcAJbQFodgR5QBNrAEjCbtsYckDYGkkTJMT7hC8zl3zzDUxPmF9A2t0Z9riPG5auJktCEy1HiTnYQvuNdvqB1VxPWe2TE/IUzKmT6MB9V6mr6fBMzKolRLSjO2Qb8KfCIsR/7q+dznJNHZvzq0+aaFjddmfKSMHVKU7bw1p+LtxOr4TC3DO7Nidfd814DNwfOUUvftJZanlxj7ySzJK2lzlLzOtbvCV8A4iFTEBBgTIcAAAAASUVORK5CYII=); content: '';
}
.loader-gplus { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px);
}
/* Demo specific styles end */
.loader-gplus { height: 50px; width: 50px; border-radius: 25px; animation: rotate 2.4s linear infinite;
}
.loader-gplus:before, .loader-gplus:after { position: absolute; width: 50px; height: 25px; right: 0px; border-radius: 50px 50px 0 0; z-index: 2; content: ''; animation: color-switch 2.4s linear infinite;
}
.loader-gplus:after { transform-origin: 0% 100%; animation-name: unfold, color-shift; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; animation-duration: .6s, 2.4s;
}
@keyframes rotate { 0.0001% { transform: rotateZ(0deg); background-color: rgb(58,123,247); } 25% { transform: rotateZ(0deg); background-color: rgb(58,123,247); } 25.0001% { transform: rotateZ(90deg); background-color: rgb(222,74,66); } 50% { transform: rotateZ(90deg); background-color: rgb(222,74,66); } 50.0001% { transform: rotateZ(180deg); background-color: rgb(255,214,74); } 75% { transform: rotateZ(180deg); background-color: rgb(255,214,74); } 75.0001% { transform: rotateZ(270deg); background-color: rgb(33,173,100); } 100% { transform: rotateZ(270deg); background-color: rgb(33,173,100); }
}
@keyframes unfold { to { transform: rotateX(180deg) rotateZ(0deg); }
}
@keyframes color-switch { 0.0001% { background-color: rgb(222,74,66); } 25% { background-color: rgb(222,74,66); } 25.0001% { background-color: rgb(255,214,74); } 50% { background-color: rgb(255,214,74); } 50.0001% { background-color: rgb(33,173,100); } 75% { background-color: rgb(33,173,100); } 75.0001% { background-color: rgb(58,123,247); } 100% { background-color: rgb(58,123,247); }
}
@keyframes color-shift { 0.0001% { background-color: rgb(58,123,247); border-bottom: 1px solid rgb(58,123,247); } 12.5% { background-color: rgb(40,95,195); border-bottom: 1px solid rgb(45,105,200); } 12.5001% { background-color: rgb(232,120,115); border-bottom: 1px solid rgb(232,120,115); } 25% { background-color: rgb(222,74,66); border-bottom: 1px solid rgb(222,74,66); } 37.5% { background-color: rgb(230,107,99); border-bottom: 1px solid rgb(230,107,99); } 37.5001% { background-color: rgb(255,222,123); border-bottom: 1px solid rgb(255,222,123); } 50% { background-color: rgb(255,214,90); border-bottom: 1px solid rgb(255,214,90); } 62.5% { background-color: rgb(255,222,123); border-bottom: 1px solid rgb(255,222,123); } 62.5001% { background-color: rgb(25,140,74); border-bottom: 1px solid rgb(25,140,74); } 75% { background-color: rgb(33,173,100); border-bottom: 1px solid rgb(33,173,100); } 87.5% { background-color: rgb(82,189,132); border-bottom: 1px solid rgb(82,189,132); } 87.5001% { background-color: rgb(82,148,247); border-bottom: 1px solid rgb(82,148,247); } 100% { background-color: rgb(58,123,247); border-bottom: 1px solid rgb(58,123,247); }
} 
| Developer | Girish Sharma |
| Username | grssam |
| Uploaded | July 31, 2022 |
| Rating | 4 |
| Size | 4,572 Kb |
| Views | 28,336 |
Do you need developer help for Google Plus loading animation in pure CSS?
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!
Girish Sharma (grssam) Script Codes
| Name | Size |
| Tilted Horizontal 3D spinner in pure CSS | 2,912 Kb |
| Facebook style loading animation in pure CSS | 2,769 Kb |
| Google Chrome Icon using Pure CSS in one DIV | 3,627 Kb |
| Metro style loading spinner animation in pure CSS | 2,820 Kb |
| Korean Flag in pure CSS | 1,784 Kb |
| Google Canary icon in pure CSS | 3,981 Kb |
| Single DIV Loading ring in Pure CSS | 3,937 Kb |
| Metro style loading animation in pure CSS | 3,237 Kb |
| Line, Square, Cube, Hypercube via folding in pure CSS | 5,810 Kb |
| Loader dots in pure CSS and 1 element | 2,500 Kb |
Create amazing web content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Simple jQuery Slider | Jurbank | 2,874 Kb |
| Mostly Fluid | Mccreath | 3,308 Kb |
| About Us | Francescaedits | 1,902 Kb |
| Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
| Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
| Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
| Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
| Codero Sitemap | S1m0ne | 28,169 Kb |
| APortfolio | Skybutterfly | 5,174 Kb |
| Intake Form Page 2 | Ijantje | 4,983 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!