Pure CSS Line Graph Animation

css line graph animation

Any app or website that wants users to pay attention needs to have both interactivity and aesthetic appeal. When it comes to grabbing the user's attention, attractive CSS line graph animations might be a useful tool. CSS line graph animation can be a powerful tool if a website or app needs to present data. In this blog post, we will learn how to create animated line graphs using only HTML and CSS. The method of creating the line graph animation is demonstrated in the video down below. If you want to see how the coding is done, watch the video.

Video Tutorial:

We hope you have watched the video once. If you need to display data on your website or app, then it is wise to use animated line graphs. Because any raw data is often overwhelming to the user and challenging to understand. This type of animation plays a very useful role if the process of data interpretation is to be simplified. This type of dynamic presentation helps users understand complex data sets more effectively and simply. Presenting any statistical data, financial trends or analysis reports, etc. can be done with this line animation graph. It has proven invaluable in transforming a website's normal numerical data into impressive visuals and making it informative and engaging.

In our snippet, we have created four line graphs each showing a different percentage for different skills. Each line graph will animate once when the website loads. It can be made more interactive with JavaScript. For example, if this animation is to be animated after scrolling the website, then JavaScript must be used. As it's not possible to make it work like that with CSS, we've used keyframes animation here.

You May Also Like:

Pure CSS Line Graph Animation [ Source Code ]:

The initial step is to create HTML and CSS files. Once you've correctly connected the files, copy the code from the box below, and then paste it into your project. After reviewing the code in your browser, if you still experience any issues, you can download it by clicking the download button below.

ADD HTML:

<!doctype html>
<html lang="en">
	<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Animated line graph using html css</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;900&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="wrapper">
    <h1>Animated line Graph</h1>
    <br><br>
    <h2>webdesign</h2>
    <div class="line line1">90%</div>
    <h2>Photography</h2>
    <div class="line line2">80%</div>
    <h2>Graphics Design</h2>
    <div class="line line3">75%</div>
    <h2>Search Engine Optimization</h2>
    <div class="line line4">70%</div>
</div>

</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	background: #111;
	font-family: 'Montserrat', sans-serif;
}
.wrapper h1 {
	text-align: center;
	text-transform: uppercase;
	margin: 70px 0 0;
	color: #fff;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 80px;
}
.wrapper h2 {
	text-align: left;
	color: #fff;
	font-weight: 300;
	font-size: 20px;
}
.wrapper {
	width: 800px;
	margin: 0 auto;
}
.line {
	height: 35px;
	max-width: 800px;
	margin: 0 auto 10px auto;
	line-height: 35px;
	font-size: 15px;
	color: white;
	padding: 0 0 0 10px;
	position: relative;
	background: #262626;
	border-radius: 50px;
	z-index: -2;
	font-weight: 900;
	box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.line::before {
	content: '';
	width: 100%;
	position: absolute;
	left: 0;
	height: 25px;
	top: 0;
	z-index: -2;
}
.line::after {
	content: '';
	background: linear-gradient(45deg, #ee0979, #ff6a00);
	height: 35px;
	transition: 0.7s;
	display: block;
	width: 100%;
	animation: animate 1 4s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: 50px;
}
.line1::after {
	max-width: 90%;
}
.line2::after {
	max-width: 80%;
}
.line3::after {
	max-width: 75%;
}
.line4::after {
	max-width: 70%;
}
@keyframes animate {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

We hope the pure CSS line graph animation code is functioning properly for you. Click the load more button on our website homepage. There, you will discover similar kinds of codes. Please spread the word about our website's content to your friends if you like it. We appreciate you visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box