Animated Progress Donut

Developer
Ahsan K. Rathore
Size
2,945 Kb
Views
40,480
  1. Animated Progress Donut Previews
  2. Animated Progress Donut HTML Codes
  3. Animated Progress Donut CSS Codes
  4. Animated Progress Donut JS Codes

How do I make an animated progress donut?

Animated Progress Donut - JS Raphael. What is a animated progress donut? How do you make a animated progress donut? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.

Animated Progress Donut Previews
IQ Test

Animated Progress Donut - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Progress Donut</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> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600' rel='stylesheet' type='text/css'>
<h2> <span class="author rt">By Ahsan K. Rathore</span> <span class="title">Animated Progress Donut - JS Raphael</span> <span class="author lt">By Ahsan K. Rathore</span>
</h2>
<!-- Chart: begins -->
<div class="chart"> <div id="DonutHelpdeskPerformance"></div> <div class="HDP-Percentage"> <div style="text-align:center; padding-top: 75px;"> <h3>Percentage Completed</h3> <span id="completed" style="display: block;"></span> </div> </div> <div class="UserInfoWrap"> <table id="HelpdeskPerformanceStats" cellpadding="0" cellspacing="0" border="0" style="display:none;"> <tbody> <tr> <td class="total-tickets">Total Tickets</td> <td class="count">289</td> </tr> <tr> <td colspan="2" style="height:10px;"></td> </tr> <tr> <td class="completed">Completed</td> <td class="count">110</td> </tr> <tr> <td colspan="2" style="height:10px;"></td> </tr> <tr> <td class="in-progress">In Progress</td> <td class="count">171</td> </tr> <tr> <td colspan="2" style="height:10px;"></td> </tr> <tr> <td class="not-read">Not Read</td> <td class="count">8</td> </tr> </tbody> </table> </div>
</div>
<!-- Script Files: begins -->
<script type="text/javascript" src="https://rawgithub.com/rathoreahsan/Interactive-Charts/master/raphael.js"></script>
<script type="text/javascript" src="https://rawgithub.com/rathoreahsan/Interactive-Charts/master/progress-donut.js"></script>
<!-- Script Files: ends --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Progress Donut - Script Codes CSS Codes

/* general css: begins */
body{ background-color: #000; }
h2 { font-family: 'Titillium Web', sans-serif; font-weight: 600; font-size: 22px; margin: 15px auto; width: 96%; color: #fff; overflow: hidden;
}
.author { font-size: 16px; color: #fcaf17;
}
.chart { border-radius: 10px; padding: 15px; position:relative; min-height: 200px; margin: 15px auto; width: 96%; box-sizing: border-box; background-color: #fff; overflow: hidden;
}
@media only screen and (min-width:601px) { .title { display: block; margin-right: 150px; } .author { float:right; width: 150px; line-height : 32px; } .lt { display: none; } #DonutHelpdeskPerformance { width: 200px; float: left; } .HDP-Percentage { display: block; margin-left: 200px; }
}
@media only screen and (min-width:511px) and (max-width:600px) { .title, .author { display: block; text-align:center; } .author { margin-top: 5px; line-height : 26px; } .lt { display: block; } .rt { display: none; } #DonutHelpdeskPerformance { width: 200px; float: left; } .HDP-Percentage { display: block; margin-left: 200px; }
}
@media only screen and (max-width:510px) { .title, .author { display: block; text-align:center; } .author { margin-top: 5px; line-height : 26px; } .lt { display: block; } .rt { display: none; } #DonutHelpdeskPerformance { width: 200px; float: none; margin: 0 auto; } .HDP-Percentage { display: block; float: none; } .HDP-Percentage div { padding-top: 0px !important; }
}
/* general css: ends */
.HDP-Percentage h3 { font-size: 20px; font-family: 'Titillium Web', sans-serif; font-weight: 600; color: #828283; line-height: 22px;
}
.HDP-Percentage #completed { font-size: 45px; font-family: 'Titillium Web', sans-serif; font-weight: 600;
}

Animated Progress Donut - Script Codes JS Codes

var total = parseInt( $('#HelpdeskPerformanceStats').find('.total-tickets').next('.count').text() ), completed = parseInt( $('#HelpdeskPerformanceStats').find('.completed').next('.count').text() ), PercentCompleted = parseInt( ( completed / total ) * 100 ), ProgressBGColor = '#9f6b04', ProgressColor = '#fbaf16', PercentageContainer = $('#completed'), StrokeWidth = 55, x = 100, y = 100, radius = 65;
Raphael("DonutHelpdeskPerformance", 200, 200).ProgressChart(x, y, radius, PercentCompleted, ProgressBGColor, ProgressColor, StrokeWidth, PercentageContainer);
Animated Progress Donut - Script Codes
Animated Progress Donut - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 3
Size 2,945 Kb
Views 40,480
Do you need developer help for Animated Progress Donut?

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!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
TransNav
Animated Bar Charts
SVG Radio Wave Alerts Animation
SVG Radar Animation with Radio Waves Alert
Select Previous Value of Dropdown on Custom Click Button
Parallax Content
Responsive Layout with Flexbox
Animated Left Menu with Parallel Content Sliding
One page responsive website By Ahsan Khurshid
Bootstrap Modal Example
Create amazing marketing copy with AI!

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!