Aperture Science style loading
How do I make an aperture science style loading?
Simple pure css aperture science style loader. What is a aperture science style loading? How do you make a aperture science style loading? This script and codes were developed by Izzy Skye on 24 October 2022, Monday.
Aperture Science style loading - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Aperture Science style loading</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cog-loader"> <div class="cog-wrap"> <div class="cog"> <div class="spoke-wrap"> <div class="spoke"> <div class="spoke"> <div class="spoke"> <div class="spoke"> <div class="spoke"></div> </div> </div> </div> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Aperture Science style loading - Script Codes CSS Codes
body { margin: 0;
}
@keyframes cog-spinner { 100% { transform: rotate(360deg); }
}
@-webkit-keyframes cog-spinner { 100% { -webkit-transform: rotate(360deg); }
}
@keyframes cog-breath { 50% { border-bottom-color: #08c; }
}
@-webkit-keyframes cog-breath { 50% { border-bottom-color: #08c; }
}
.cog-loader { position: fixed; height: 100vh; width: 100%; background-color: rgba(0, 0, 0, 0.875);
}
.cog-loader * { transition: none; -webkit-transition: none; box-sizing: content-box;
}
.cog-loader .cog-wrap { position: relative; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); height: 37px; width: 37px; overflow: hidden; border-radius: 100%;
}
.cog-loader .cog-wrap .cog { position: relative; float: left; width: 50px; height: 50px; left: -6.5px; top: -6.5px; box-sizing: border-box; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; animation: cog-spinner 4s linear infinite; -webkit-animation: cog-spinner 4s linear infinite;
}
.cog-loader .cog-wrap .cog .spoke-wrap { position: absolute; top: 6.5px; left: -16px; height: 100%; width: 100%;
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke { position: absolute; right: 12.75px; width: 8px; height: 0; border: 8px solid transparent; border-bottom-color: #dadada; border-bottom-width: 8px; transform: rotate(288deg);
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke { animation: cog-breath 2s linear 0.4s infinite; -webkit-animation: cog-breath 2s linear 0.4s infinite;
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke .spoke { animation: cog-breath 2s linear 0.8s infinite; -webkit-animation: cog-breath 2s linear 0.8s infinite;
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke .spoke .spoke { animation: cog-breath 2s linear 1.2s infinite; -webkit-animation: cog-breath 2s linear 1.2s infinite;
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke .spoke .spoke .spoke { animation: cog-breath 2s linear 1.6s infinite; -webkit-animation: cog-breath 2s linear 1.6s infinite;
}
.cog-loader .cog-wrap .cog .spoke-wrap .spoke .spoke .spoke .spoke .spoke { animation: cog-breath 2s linear 2s infinite; -webkit-animation: cog-breath 2s linear 2s infinite;
}
Developer | Izzy Skye |
Username | zephyr |
Uploaded | October 24, 2022 |
Rating | 3 |
Size | 2,782 Kb |
Views | 30,360 |
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!
Name | Size |
Animated Chart Cards | 6,245 Kb |
Pure CSS Down Arrow | 1,724 Kb |
Pure CSS Wordpress Fancyboxes | 4,789 Kb |
Vanilla JS Pattern Locker | 8,565 Kb |
Pure CSS Read More Arrow | 1,747 Kb |
Material CSS Contact Popup | 6,039 Kb |
Unisolated Pure CSS Mobile Nav Spinner | 1,852 Kb |
Material Button Click Example Usage | 2,185 Kb |
JQuery Slider | 3,529 Kb |
Pure CSS Tab Navigation | 3,259 Kb |
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!
Name | Username | Size |
SVG Animation | Thepheer | 4,793 Kb |
React Template | Isac | 1,241 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Simple content swap | Snografx | 1,859 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
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!