
We can create different type of pie chart but today we will discuss on only one pie chart which help you to create any kind of pie chart using the same concept.
Before start discussing about the topic you can see image below to know that what you actually going to do.
0%
20%
40%
60%
80%
So let's start from HTML where you have to create a circle using CSS properties.
<div class=”pie-chart”></div>Now the time to get circle shape using following CSS properties.
0%
.pie-chart { width: 200px; height: 200px; border-radius: 50%; background: #ff0000; }The above width and height property will give you the pie chart size which you can change based on your requirement and hopefully don’t necessary to discuss about each CSS properties and if you wants to know more about the CSS properties then you have read our previous posts on CSS. So now we need to add different color in half circle using simple linear gradient. Add one more CSS property on above class.
.pie-chart { width: 200px; height: 200px; border-radius: 50%; background: #ff0000; background-image:linear-gradient(to right, transparent 50%, #333 0); }
For masking we have to add pseudo-element so use following CSS properties. . pie-chart::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; }
50%
Now the time to rotate based on the given value which also you can manage dynamically. So use following CSS properties to rotate half circle based on given percentage.
@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #333; } } .pie-chart::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }And if you merge all css then the complete css will be same as below.
.pie-chart { display: inline-block; position: relative; width: 200px; line-height: 200px; border-radius: 50%; background: #ff0000; background-image: linear-gradient(to right, transparent 50%, #333 0); color: transparent; text-align: center; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #333; } } .pie-chart::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }Let's apply them on html elements and change value to see result.
<div style="animation-delay: 0s;" class="pie-chart">0%</div>Use minus value in 'animation-delay:' upto -100, to see how it works easily.
<div style="animation-delay: -20s;" class="pie-chart">20%</div>
<div style="animation-delay: -40s;" class="pie-chart">40%</div>
<div style="animation-delay: -60s;" class="pie-chart">60%</div>
<div style="animation-delay: -80s;" class="pie-chart">80%</div>
0%
20%
40%
60%
80%

Get expert Question & Answer Dumps PDF Online. We Provide latest IT Certification Exams PDF for preparation Study Guide Test Practice for Success in exams. This is an online education portal
ReplyDelete1z0-996 pdf dumps