Home » Pure CSS Battery Charging Animation

Pure CSS Battery Charging Animation

by techmidpoint
Pure CSS Battery Charging Animation Using HTML and CSS

Pure CSS Battery Charging Animation

Hello, friends in this post I am going to make Pure CSS Battery Charging Animation. You can easily create the battery charging animation using HTML and CSS. I have mentioned the source code below. Just copy the given source code and paste it into your text editor and edit according to your requirement.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Battery Charging Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="battery"></div>
</body>
</html>

CSS

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #282833;
}
.battery{
    height: 110px;
    width: 225px;
    border: 8px solid #ffffff;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 12px;
}
.battery:before{
    content: "";
    position: absolute;
    margin: auto;
    height: 55px;
    width: 20px;
    background-color: #ffffff;
    right: -25px;
    top: 0;
    bottom: 0;
    border-radius: 0 7px 7px 0;
}
.battery:after{
    content: "";
    position: absolute;
    height: 80px;
    width: 40px;
    background-color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 10px;
    border-radius: 5px;
    box-shadow: 50px 0 transparent,
                100px 0 transparent,
                150px 0 transparent;
    animation: charge 4s infinite;
}
@keyframes charge{
    22%{
        box-shadow: 50px 0 transparent,
        100px 0 transparent,
        150px 0 transparent;
    }
    25%{
        box-shadow: 50px 0 #ffffff,
        100px 0 transparent,
        150px 0 transparent;
    }
    47%{
        box-shadow: 50px 0 #ffffff,
        100px 0 transparent,
        150px 0 transparent;
    }
    50%{
        box-shadow: 50px 0 #ffffff,
        100px 0 #ffffff,
        150px 0 transparent;
    }
    72%{
        box-shadow: 50px 0 #ffffff,
        100px 0 #ffffff,
        150px 0 transparent;
    }
    75%{
        box-shadow: 50px 0 #ffffff,
        100px 0 #ffffff,
        150px 0 #ffffff;
    }
    95%{
        box-shadow: 50px 0 #ffffff,
        100px 0 #ffffff,
        150px 0 #ffffff;
    }
}


For More Tutorial Please Click Here

You may also like

Leave a Comment