4.6K
CSS Pencil Loader Stroke Animation With HTML and CSS
Are you looking for loader animation or want to add awesome loader animation to your project? In this tutorial, I am going to create a pure CSS Pencil Loader Stroke Animation With HTML and CSS. You can see clearly a pencil draws a line left to right.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Pencil Loader Stroke Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="stroke"></div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
background: #333;
}
.stroke{
width:400px;
height: 5px;
background: #ecfb04;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.stroke:before{
content: '';
position: absolute;
top:0;
left: 0;
width:100%;
height: 100%;
background: #333;
animation: animate 5s linear infinite;
animation-timing-function: cubic-bezier(.75,.04,0,.86);
}
.stroke:after{
content: '\f040';
font-family: fontAwesome;
position: absolute;
top:-65px;
left:0;
width:100%;
height: 100%;
background: #333;
animation: animate 5s linear infinite;
color:#ecfb04;
font-size: 70px;
transform: translateX(2px);
animation-timing-function: cubic-bezier(.75,.04,0,.86);
}
@keyframes animate{
0%{
left:0;
}
50%{
left:100%;
}
100%{
left: 0;
}
}
For More Tutorials Please Click Here
