CSS Loading Animation Circle
How do I make an css loading animation circle?
What is a css loading animation circle? How do you make a css loading animation circle? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.
CSS Loading Animation Circle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Loading Animation Circle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="loader"></span>
</body>
</html>
CSS Loading Animation Circle - Script Codes CSS Codes
body { background-color: #f90;
}
.loader { box-shadow: inset 0 0 0 2px #fff; display: inline-block; height: 18px; position: relative; width: 18px;
}
.loader,
.loader:before,
.loader:after { border-radius: 50%;
}
.loader:before,
.loader:after { background: #f90; content: ''; position: absolute;
}
.loader:before { -webkit-animation: load 2s infinite ease 1.5s; animation: load 2s infinite ease 1.5s; border-radius: 0; height: 100%; left: 0; top: 0; -webkit-transform-origin: 9px 9px; transform-origin: 9px 9px; width: 50%;
}
.loader:after { -webkit-animation: load 2s infinite ease; animation: load 2s infinite ease; border-radius: 0; height: 100%; left: 50%; top: 0; -webkit-transform-origin: 0px 9px; transform-origin: 0px 9px; width: 50%;
}
@-webkit-keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
Developer | Kevin Weber |
Username | kevinweber |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 2,103 Kb |
Views | 42,504 |
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 |
Simple Pulsating Button | 1,789 Kb |
Mark text on hover | 1,678 Kb |
Logo icon and text animation | 2,418 Kb |
Fill circle from bottom to top in percent | 2,760 Kb |
Change link color from left to right | 1,977 Kb |
CSS triangles | 1,472 Kb |
Slack Icon Letter Generator | 1,946 Kb |
Animated Video Play Button by Adobe | 2,668 Kb |
Zoom background cover image on hover | 1,874 Kb |
SqueezeText demo | 4,001 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 |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Speech bubbles | Something | 1,547 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Apple website | Jds317 | 1,835 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
SVG Circle Progress | JMChristensen | 3,368 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!