JSFiddle - React, Tailwind, and code Playground

by PratapDessai

HTML

<!DOCTYPE html>
<html>
    <style>
    @keyframes my-animation {        
  from {
    opacity : 0;
    left : -500px;
  }
  to {
    opacity : 1;
    left : 0;
  }      
}

.run-animation {
  position: relative;
  animation: my-animation 2s ease;
}

#logo {
  text-align: center;
  font-family : Palatino Linotype, Book Antiqua, Palatino, serif;
}

  #myProgress {
      position: relative;

    width: 100%;
    background-color: grey;
  }
  .myBar {
      position: relative;

    height: 14px;
    width: 1%;
    background-color: green;
  }
    .myBarAnim {
        position: relative;

        height: 14px;
      background-color: green;
        animation: anim 2s;

    }
    @keyframes anim {
        0% {
            width: 1%;
        }
        50% {
            width: 50%;
        }
        100% {
            width: 100%;
        }
    }
    </style>
    <body>
        <div id="myProgress">
            <div class="myBar" id="myid">
            </div>
        </div>
        <button id='clicker'>Click Me</button>
        
        <script>
        
        /* function clickHandler() {
            let elem = document.getElementById('myBar');
            let timer = setInterval(frame, 10);
            let width = 1;
            function frame() {
                if (width >= 100) {
                    clearInterval(timer);
                } else {
                    width++;
                    elem.style.width = width + '%';
                }
            }
        } */

        
let elem = document.getElementById('clicker');
console.log('elem-', elem);
  elem.addEventListener("click", function (event) {
    console.log('inside click')
    event.preventDefault;
    let elem2 = document.getElementById('myid');
    
    elem2.classList.remove("myBar");
    //void elem2.offsetWidth;
    elem2.classList.add("myBarAnim");
   }, false);
        </script>
    </body>
</html>