Gear
How do I make an gear?
What is a gear? How do you make a gear? This script and codes were developed by Lorena Sarasua on 15 January 2023, Sunday.
Gear - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gear</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <div class ="loading-wrapper"> <div class="loading">Loading…</div> </div>
</div>
</body>
</html>
Gear - Script Codes CSS Codes
/* Loading Spinner */
/* Absolute Center Spinner */
.loading { position: absolute; height: 500px; width: 100%; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0;
}
/* Transparent Overlay */
// .loading:before {
// content: '';
// display: block;
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-color: rgba(0,0,0,0.3);
// }
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) { /* hide "loading..." text */ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;
}
.loading:not(:required):after { content: ''; color: #42C4FA; display: block; font-size: 10px; line-height: 10em; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0%; border: solid 5px #42C4FA; -webkit-box-shadow: rgba(255, 46, 234, 1) 1.5em 0 0 0, rgba(255, 46, 234, 1) 1.1em 1.1em 0 0, rgba(255, 46, 234, 1) 0 1.5em 0 0, rgba(255, 46, 234, 1) -1.1em 1.1em 0 0, rgba(255, 46, 234, 1) -1.5em 0 0 0, rgba(255, 46, 234, 1) -1.1em -1.1em 0 0, rgba(255, 46, 234, 1) 0 -1.5em 0 0, rgba(255, 46, 234, 1) 1.1em -1.1em 0 0; box-shadow: rgba(255, 46, 234, 1) 1.5em 0 0 0, rgba(255, 46, 234, 1) 1.1em 1.1em 0 0, rgba(255, 46, 234, 1) 0 1.5em 0 0, rgba(255, 46, 234, 1) -1.1em 1.1em 0 0, rgba(255, 46, 234, 1) -1.5em 0 0 0, rgba(255, 46, 234, 1) -1.1em -1.1em 0 0, rgba(255, 46, 234, 1) 0 -1.5em 0 0, rgba(255, 46, 234, 1) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
// ========================
Developer | Lorena Sarasua |
Username | elorenn |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,048 Kb |
Views | 12,144 |
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 |
CSS Beer Animated - Octoberfest | 4,613 Kb |
CSS Pixel Animation | 10,216 Kb |
A Pen by Lorena Sarasua | 2,218 Kb |
CSS Only Beer - Single Div vs Animated | 6,338 Kb |
CSS Potted Plant on a Pile of Books | 7,244 Kb |
Wobbly round | 2,055 Kb |
CSS Bee Illustration | 3,994 Kb |
CSS Beer Single Div - Octoberfest | 3,891 Kb |
Split button delete or download confirm | 3,451 Kb |
Collision detection force bubbles D3 | 1,889 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 |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Ocean | Gordonnl | 2,817 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 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!