Connect with us!
Pie Graph Loader Animation created using HTML and CSS
A Pie Graph Loader Animation created using HTML and CSS is a dynamic visual element commonly seen on websites and applications during loading processes.
Table of Contents
Pie Graph CSS Properties Used in the code
Following are the CSS properties used:
Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.”/><style media=”print
Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.”/><style media=”print
Background-repeat: The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.”/><style media=”print
Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.”/><style media=”print
Background-position: The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.”/><style media=”print
Border-radius: The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.”/><style media=”print
Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.”/><style media=”print
Pie Graph Code Snippet Block
Here is the code for implementing the Pie Graph Animation.
.pie-chart {
margin-left: 80px;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
orange;
background-position: 0 0, 100% 0,
100% 100%, 0 100%;
background-repeat: no-repeat;
}Yay! We have created the static Pie Graph Animation.
Here is the output:
Pie Graph CSS Animation Snippet Block
move-in animation can be implemented by scaling up and down the shape linearly.
Following are the classes used for animation.
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Here is the CSS animation class implementing CSS.
@keyframes move-in {
0% {
background-size: 0 0,
0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
0 0;
}
12.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 0 0, 51% 51%;
}
25% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 51% 51%, 51% 51%;
}
37.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 51% 51%, 51% 51%, 51% 51%;
}
50% {
background-size: 0 0, 0 0, 0 0,
0 0, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
62.5% {
background-size: 0 0, 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
75% {
background-size: 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%;
}
87.5% {
background-size: 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
100% {
background-size: 51% 51%,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
}The following way is to declare the CSS Class inside the class block.
.pie-chart {
margin-left: 80px;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
orange;
background-position: 0 0, 100% 0,
100% 100%, 0 100%;
background-repeat: no-repeat;
animation: move-in 2s infinite;
}
@keyframes move-in {
0% {
background-size: 0 0,
0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
0 0;
}
12.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 0 0, 51% 51%;
}
25% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 51% 51%, 51% 51%;
}
37.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 51% 51%, 51% 51%, 51% 51%;
}
50% {
background-size: 0 0, 0 0, 0 0,
0 0, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
62.5% {
background-size: 0 0, 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
75% {
background-size: 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%;
}
87.5% {
background-size: 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
100% {
background-size: 51% 51%,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
}Following is the output for Pie Graph Animation animation.
Pie Graph CSS YouTube Video Tutorial
You can find the complete coding tutorial in the following YouTube Short video.
HTML and CSS Snippet Block
Copy and paste the complete code in Visual studio code to view the output.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pie-chart {
margin-left: 80px;
width: 200px;
height: 200px;
border-radius: 50%;
background:
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#25b09b 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
linear-gradient(#f03355 0 0),
orange;
background-position: 0 0, 100% 0,
100% 100%, 0 100%;
background-repeat: no-repeat;
animation: move-in 2s infinite;
}
@keyframes move-in {
0% {
background-size: 0 0,
0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
0 0;
}
12.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 0 0, 51% 51%;
}
25% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 0 0, 51% 51%, 51% 51%;
}
37.5% {
background-size: 0 0, 0 0, 0 0,
0 0, 0 0, 51% 51%, 51% 51%, 51% 51%;
}
50% {
background-size: 0 0, 0 0, 0 0,
0 0, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
62.5% {
background-size: 0 0, 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%, 51% 51%,
51% 51%;
}
75% {
background-size: 0 0, 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%;
}
87.5% {
background-size: 0 0,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
100% {
background-size: 51% 51%,
51% 51%, 51% 51%, 51% 51%,
51% 51%, 51% 51%,
51% 51%, 51% 51%;
}
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Pie Chart Animation</h1>
<div class="pie-chart"></div>
</body>
</html>Thank you for reading this article. I hope that it helps you creating your own Pie Graph Animation using CSS and HTML. See you in next tutorial!
