Snap animate percentage

Developer
Camilla Knap
Size
3,545 Kb
Views
18,216
  1. Snap animate percentage Previews
  2. Snap animate percentage HTML Codes
  3. Snap animate percentage CSS Codes
  4. Snap animate percentage JS Codes

How do I make an snap animate percentage?

Snap script borrowed from here: http://codepen.io/rachsmith/pen/BqpCd. What is a snap animate percentage? How do you make a snap animate percentage? This script and codes were developed by Camilla Knap on 29 November 2022, Tuesday.

Snap animate percentage Previews
IQ Test

Snap animate percentage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>snap animate percentage</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="counter-module"> <div id="percentage"> </div> <svg class="full-circle" viewbox="0 0 16 16" preserveaspectratio="none"> <circle cx="8" cy="8" r="6.215"></circle> </svg> <svg class="percentage-circle"> </svg> <input id="percentage-circle__input" maxlength="2" type="text" value="67"/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Snap animate percentage - Script Codes CSS Codes

.counter-module { width: 300px; height: 300px; position: relative; margin: auto; font-family: arial;
}
#percentage-circle__input { display: none;
}
.percentage-circle { position: absolute; top: 0; left: 0; margin-top: 30px; margin-left: 30px; width: 260px; height: 260px;
}
.percentage-circle > path { stroke-width: 20; fill: none; stroke: #f9b145;
}
#percentage { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 20px; line-height: 20px; font-size: 60px; text-align: center; color: #ef9614; opacity: 0.8;
}
.full-circle { width: 300px; height: 300px; position: absolute; top: 0; left: 0;
}
.full-circle > circle { opacity: 0; fill: none; stroke: #ef9614; stroke-width: 0.6; stroke-dasharray: 40 40; stroke-dashoffset: 40; -webkit-transition: stroke-dashoffset 1.2s, opacity 1.2s; transition: stroke-dashoffset 1.2s, opacity 1.2s;
}
.active .full-circle > circle { opacity: 1; stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 1.2s, opacity 1.2s; transition: stroke-dashoffset 1.2s, opacity 1.2s;
}

Snap animate percentage - Script Codes JS Codes

setTimeout(function(){ $('.counter-module').addClass('active');
}, 200);
//Credits https://codepen.io/rachsmith/pen/BqpCd
var canvasSize = 240, centre = canvasSize/2, radius = canvasSize*0.8/2, s = Snap('.percentage-circle'), path = "", arc = s.path(path), startY = centre-radius, percDiv = document.getElementById('percentage'), input = document.getElementById('percentage-circle__input');
function run(percent) { var endpoint = percent*359.99; Snap.animate(0, endpoint, function (val) { arc.remove(); var d = val, dr = d-90; radians = Math.PI*(dr)/180, endx = centre + radius*Math.cos(radians), endy = centre + radius * Math.sin(radians), largeArc = d>180 ? 1 : 0; path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy; arc = s.path(path); percDiv.innerHTML = Math.round(val/360*100) +'%'; }, 1200, mina.easeinout);
}
run(input.value/100);
Snap animate percentage - Script Codes
Snap animate percentage - Script Codes
Home Page Home
Developer Camilla Knap
Username clknap
Uploaded November 29, 2022
Rating 3
Size 3,545 Kb
Views 18,216
Do you need developer help for Snap animate percentage?

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!

Camilla Knap (clknap) Script Codes
Name
Object-fit cover
Burger menu animation - greensock
Input label placeholder animation
CSS only accordion
Playing around with flexbox grid
Morph svg icons with greensock
Flexbox testing margin auto compared to flex-grow
Input label animation
Css3 loader
A Pen by Camilla Knap
Create amazing blog posts 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!