Circle loading
How do I make an circle loading?
Clip method was used. What is a circle loading? How do you make a circle loading? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.
Circle loading - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circle loading</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='loading'> <div class='outer-shadow'></div> <div class='inner-shadow'></div> <div class='timer'> <div class='dot'> <span></span> </div> <div class='hold' id='left'> <div class='pie'></div> </div> <div class='hold' id='right'> <div class='pie'></div> </div> </div>
</div>
</body>
</html>
Circle loading - Script Codes CSS Codes
html { background-color: #dde6f0;
}
#loading { width: 100px; height: 100px; margin: 30px auto; position: relative;
}
.outer-shadow, .inner-shadow, #timer { z-index: 6; position: absolute; width: 100%; height: 100%; border-radius: 100%; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.inner-shadow { top: 50%; left: 50%; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; border-radius: 100%; background-color: #dde6f0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#timer { z-index: 1; box-shadow: none;
}
.hold { position: absolute; width: 100%; height: 100%; clip: rect(0px, 100px, 100px, 50px); -webkit-border-radius: 100%; background-color: #fff;
}
.pie, .dot span { background-color: #f50;
}
.pie { position: absolute; width: 100%; height: 100%; -webkit-border-radius: 100%; clip: rect(0px, 50px, 100px, 0px);
}
#left .pie { z-index: 1; -webkit-animation: left 4s linear both;
}
@-webkit-keyframes left { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); }
}
#right { z-index: 3; -webkit-transform: rotate(180deg);
}
#right .pie { -webkit-animation: right 4s linear both; -webkit-animation-delay: 4s;
}
@-webkit-keyframes right { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(180deg); }
}
.dot { z-index: 2; position: absolute; left: 50%; top: 50%; width: 50%; height: 10px; margin-top: -5px; -webkit-animation: dot 8s linear both; -webkit-transform-origin: 0% 50%;
}
.dot span { position: absolute; right: 0; width: 10px; height: 10px; border-radius: 100%;
}
@-webkit-keyframes dot { 0% { -webkit-transform: rotate(-90deg); } 50% { -webkit-transform: rotate(90deg); z-index: 4; } 100% { -webkit-transform: rotate(270deg); z-index: 4; }
}
Developer | Adem Ilter |
Username | ademilter |
Uploaded | June 11, 2022 |
Rating | 4.5 |
Size | 2,932 Kb |
Views | 78,936 |
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 |
Product list | 3,211 Kb |
Lunar eclipse | 2,056 Kb |
Timeline with css | 2,817 Kb |
Test-tube | 2,718 Kb |
Fake loading | 1,952 Kb |
Interacthings logo animation | 2,841 Kb |
Prayer times layout | 5,245 Kb |
Countdown Clock | 4,715 Kb |
Pure CSS3 iPad Clock | 6,546 Kb |
Loading svg | 2,319 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 |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
AngularJS Skills | Supro | 3,312 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Speech bubbles | Something | 1,547 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Filter inputs | Rowinf | 1,721 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!