JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

  <head>
   <meta name="robots" content="noindex,nofollow">
        <meta charset="utf-8">
       <link href="style.css" rel="stylesheet"/>
        <title>PTIT PANINI | Infographiste</title>
        <p id="img_logo"><img src="Images/Logo_PTIT_Panini_Infographiste.png"></p>
    </head>

    <div class="loading-page">
         <div class="counter">
         <h1>0%
         <!--
         h1.abs loading
         h1.abs.color loading
         -->
        </h1>
        <hr/>
       </div>
</div>
        

  <body>
      
    
  </body>

</html>

CSS

body{
    max-width : auto; 
    margin-right : auto;
    margin-left: auto;
}
#img_logo{
    
    text-align : auto ;
}
    img_logo img{
    width : 10%;


}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100);
* {
  box-sizing: border-box;
  margin: 0;
}

h1, p, h2, h3, h4, ul, li, div {
  margin: 0;
  padding: 0;
}

body {
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: Roboto;
}

.loading-page {
  background: #ffffff;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.loading-page .counter {
  text-align: center;
}
.loading-page .counter p {
  font-size: 40px;
  font-weight: 100;
  color: #d80027;
}
.loading-page .counter h1 {
  color: #d80027;
  font-size: 60px;
  margin-top: -10px;
}
.loading-page .counter hr {
  background: #d80027;
  border: none;
  height: 7px;
}
.loading-page .counter {
  position: relative;
  width: 200px;
}
.loading-page .counter h1.abs {
  position: absolute;
  top: 0;
  width: 100%;
}
.loading-page .counter .color {
  width: 0px;
  overflow: hidden;
  color: #d80027;
}

JavaScript

$(document).ready(function() {
  
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
      //$(".loading-page .counter").css("background", "linear-gradient(to right, #f60d54 "+ c + "%,#0d0d0d "+ c + "%)");

    /*
    $(".loading-page .counter h1.color").css("width", c + "%");
    */
    counter++;
    c++;
      
    if(counter == 101) {
        clearInterval(i);
    }
  }, 50);
});