Home » CSS Pencil Loader Stroke Animation With HTML and CSS

CSS Pencil Loader Stroke Animation With HTML and CSS

by techmidpoint
CSS Pencil Loader Stroke Animation With HTML and CSS

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

You may also like

Leave a Comment