Simple Charging Bar Animation using CSS ?

Simple Charging Bar Animation using CSS ?  

background: linear-gradient(direction,color1 50%,color2 50%);


<html>
  <head></head>
  <style>
    body{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25%;
    }
   
    .box{
    height: 1.25rem;
    width: 5rem;
    background-color: gold;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 5rem;
    align-items: center;
    text-align: center;
    }
    .box:hover{
    animation: fro 1s linear infinite;
    }
   
    @keyframes fro {
    0%{
    background: linear-gradient(to right, green 0%, gold 100%);
    }
    25%{
    background: linear-gradient(to right, green 25%, gold 75%)
    }
    50%{
    background: linear-gradient(to right, green 50%, gold 50%);
    }
    75%{
    background: linear-gradient(to right ,green 75%, gold 25%);
    }
    100%{
    background: linear-gradient(to right ,green 100%, gold 0%)
    }
    }
  </style>
  <body>
    <div class="box">
        charging
    </div>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

JavaScript Typing Animation

Image
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing Animation</title> <style> textarea{ word-wrap:break-word; white-space:pre-wrap; grid:1; position:fixed; z-index:1000; } .activate{ position:fixed; margin-left:0px; } .clear{ position:fixed; margin-left:100px; } body{ display:grid; grid-template-columns:repeat(2,10vw); grid-template-rows:repeat(2,10vw); gap:10px; align-items:justify; margin:5px; padding:5px; } .output{ scroll-behavior:smooth; height:auto; width:auto; grid-column:2/2; } </style> </head> <body> <textarea></textarea> <pre class="output"></pre> <div class="container"> <button class="activate">StartTyping</button> <button class="clear">Clear</button> </div> </body> <s...
Read more

AXIOS REACT JS

😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍😍  axios({   method: 'post',   url: 'https://api.example.com/data',   data: {     // Your data object here   },   headers: {     'Content-Type': 'application/json', // For sending JSON data     'Accept': 'application/json', // For specifying what response types are acceptable     'Content-Type': 'application/x-www-form-urlencoded', // For sending form data     'Content-Type': 'multipart/form-data', // For sending multipart form data (like files)     'Content-Type': 'text/plain', // For sending plain text data     'Content-Type': 'application/xml', // For sending XML data     'Content-Type': 'application/octet-stream' // For sending binary data     // Add more headers as needed   } }) .then(response => {   console.log(response.data); }) .catch(error => {   console.error('Error:', error); }); 😍😍😍😍😍...
Read more