37
First You need to use jQuery and easy pie chart CDN OR Download jQuery and easy pie chart New Virtion
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js" charset="utf-8"></script>
<div class="container">
<div class="card">
<h3 class="text">HTML: 90%</h3>
<h3 class="text">CSS: 72%</h3>
<h3 class="text">JS: 81%</h3>
</div>
<div class="Box">
<div class="chart html" data-percent="90" ></div>
<div class="chart css" data-percent="72" ></div>
<div class="chart js" data-percent="81" ></div>
</div>
</div>
body{
background-color: #f5f5f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
line-height: 1.5px;
font-family: sans-serif;
}
.container{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
width: 500px;
height: 400px;
background-color: #fff;
}
.card{
text-align: center;
}
.box{
position: relative;
}
.chart{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
$(function() {
$('.html').easyPieChart({
size: 200,
barColor: "#36e617",
scaleLength: 0,
lineWidth: 20,
trackColor: "#525151",
lineCap: "circle",
animate: 2000,
});
$('.css').easyPieChart({
size: 240,
barColor: "#A52A2A",
scaleLength: 0,
lineWidth: 20,
trackColor: "#525151",
lineCap: "circle",
animate: 2000,
});
$('.js').easyPieChart({
size: 280,
barColor: "#FFA500",
scaleLength: 0,
lineWidth: 20,
trackColor: "#525151",
lineCap: "circle",
animate: 2000,
});
});
CSS hover effects allow elements to load quickly. Most web designers prefer CSS animations as they are easy to employ.