Chart Loading Animation
How do I make an chart loading animation?
What is a chart loading animation? How do you make a chart loading animation? This script and codes were developed by Albert Miller on 05 January 2023, Thursday.
Chart Loading Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chart Loading Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="graph"><div class="cover"></div> <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</section>
</body>
</html>
Chart Loading Animation - Script Codes CSS Codes
.graph { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26); margin: 10px; min-height: 300px; padding: 10px; position: relative;
}
.cover { background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
body { background-color: #E1E1E1;
}
.spinner { animation: rotator 1.4s linear infinite; position: absolute; top: calc(50% - 32.5px); left: calc(50% - 32.5px);
}
@keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); }
}
.path { stroke-dasharray: 187; stroke-dashoffset: 0; transform-origin: center; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@keyframes colors { 0% { stroke: #4285F4; } 25% { stroke: #DE3E35; } 50% { stroke: #F7C223; } 75% { stroke: #1B9A59; } 100% { stroke: #4285F4; }
}
@keyframes dash { 0% { stroke-dashoffset: 187; } 50% { stroke-dashoffset: 46.75; transform: rotate(135deg); } 100% { stroke-dashoffset: 187; transform: rotate(450deg); }
}
Developer | Albert Miller |
Username | SinceSidSlid |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 2,539 Kb |
Views | 6,072 |
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 |
Expert Help | 4,064 Kb |
Loading State | 2,600 Kb |
Work Day Clock | 4,102 Kb |
Order Redesign | 5,080 Kb |
Lunch and Browser Check | 4,546 Kb |
Material Menu With Paging | 3,526 Kb |
Scroll Lock | 2,497 Kb |
Material Calendar | 2,818 Kb |
Material Toggle Switch | 2,427 Kb |
A Pen by Albert Miller | 1,382 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 |
Price table | Serluk | 5,928 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
The Rope | Chribbe | 2,886 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Swiftype Lower Third | Zumwalt | 4,796 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!