Indicoderz

battery loading animation Using html and css codes - Hello guys, today we will see you in this blog you'll learn battery loading animation Using html and css codes for website| HTML Website Tutorials indicoderz .Earlier I have shared a blog on battery loading animation Using html and css codes for website| HTML Website Tutorials indicoderz Generally to html and css codes

Html code

	

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="main">

        <div class="box"></div>

    </div>

</body>

</html>

CSS code

	

*{

margin: 0;

padding: 0;

}

body{

background-color: #eacbfa;

}

.main{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.box{

width: 150px;

height: 80px;

border: 6px solid #000;

position: relative;

}

.box::before{

content: '';

position: absolute;

top: 50%;

right: -12px;

transform: translate(0, -50%);

width: 10px;

height: 25px;

background-color: #000;

}

.box::after{

content: '';

position: absolute;

top: 2px;

left: 2px;

width: 97%;

height: 95%;

background-color: #fff;

animation: anim 1s linear infinite;

}

@keyframes anim{

0%{

width: 45%;

}

100%{

width: 95%;

}

}

1 Comments

Post a Comment

Contact Form

battery loading animation Using html and css codes

You might like

1 Comments

Post a Comment

Contact Form