leaderboard.css

body{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  *{
    box-sizing: border-box;
  }
  
  .Leaderboard{
      padding: 40px 20px;
      margin: auto;
      max-width: 800px;
  }
  .leader-wrap {
      display: flex;
  }
  
  .leader{
      padding: 8px 16px;
      margin-bottom: 8px;
      animation-name: revealLeaders;
      animation-duration: .4s;
      animation-fill-mode: both;
      animation-timing-function: ease-in-out;
  }
  
  .leader-ava {
      padding: 8px;
      margin-right: 16px;
      position: relative;
  }
  
  .leader-score {
      display: flex;
      align-items: center;
      opacity: 0.6;
  }
  
  .leader-score svg{
      display: block;
      margin-right: 4px;
  }
  
  .leader-score_title{
      line-height: 1;
  }
  
  .leader-ava::after{
      content: "";
      left: 0;
      bottom: 0;
      display: block;
      height: 6px;
      position: absolute;
      border: 0px transparent solid;
      border-left-width: 20px;
      border-right-width: 20px;
      border-bottom-width: 6px;
      border-bottom-color: #fff;
      transition: border-bottom-color .2s ease-in-out;
  }
  
  .leader-bar {
      margin-top: 8px;
      animation-name: barLoad;
      animation-duration: .4s;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0.6, 0.2, 0.1, 1);
      transform-origin: left;
  }
  
  .bar {
      height: 4px;
      border-radius: 2px;
  }
  
  @keyframes revealLeaders{
      from{
          transform: translateX(-200px);
          opacity: 0;
      }
      to{
          transform: none;
          opacity: 1;
      }
  }
  
  @keyframes barLoad{
      from{
          transform: scaleX(0);
      }
      to{
          transform: scaleX(1)
      }
  }