Svg loading circle
How do I make an svg loading circle?
What is a svg loading circle? How do you make a svg loading circle? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.
Svg loading circle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>svg loading circle</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 class="wrapper"> <svg viewBox="0 0 100 100"> <circle class="one" r="40" cx="50" cy="50" /> <span class="num">100%</span> </svg>
</div>
</body>
</html>
Svg loading circle - Script Codes CSS Codes
body { background-color: #333; font-family: sans-serif;
}
.wrapper { width: 100px; margin: 5% auto; position: relative;
}
svg { width: 100px; height: 100px; transform: rotateZ(-90deg); border-radius: 50%; position: relative; display: block; margin: 0; padding: 0; clear: both; box-shadow: 0 0 20px #339999;
}
circle { fill: rgba(51, 153, 153, 0.2); stroke: #339999; stroke-width: 10; stroke-dasharray: 0 250; animation: fillup 3s forwards;
}
.num { color: rgba(255, 255, 255, 0.8); left: 50%; top: 50%; z-index: 999; display: block; position: absolute; transform: translate(-50%, -50%);
}
@keyframes fillup { to { stroke-dasharray: 251 251; }
}
Developer | Jimmy Van Der Sleen |
Username | sjimster |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 2,271 Kb |
Views | 4,048 |
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 |
Profile Card Envato Remix Challenge | 3,914 Kb |
Toggle Hamburger Menu | 2,892 Kb |
Inline Title Editor | 3,584 Kb |
Fancy input fields | 3,537 Kb |
Simple image slider | 3,446 Kb |
SVG Handwriting test | 3,148 Kb |
SoundCloud API user | 4,556 Kb |
Css 3D Cube try-out | 2,404 Kb |
CountingLikes | 2,654 Kb |
Website Header SVG Animation | 3,991 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 |
Sticky div | Kaslab | 2,225 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Guidepopup | Wooljs | 3,747 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 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!