Оформление сабгола

https://youtu.be/EtNP3vXgw-A

для установки идем на streamlabs>>виджиты>>Целевое число последователей>>Настройки>>Включить пользовательские HTML/CSS

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="progressBar">

<div class="main">
  <div id="title"> Название для сабгола! </div>
  
  <div class="icon"><i class="material-icons">favorite_border</i></div>
  
  <div class="w3-border">
  <div class="w3-grey" style="height:20px;width:40%"></div>
</div>
      <div  class="num" id='goal-current'>      </div>
    <div class="num" id='goal-total'>      </div>
</div>
          </div>


* {
    font-family: 'Roboto', sans-serif;
    font-size: 110%;
}
.material-icons {
  font-size: 140% !important;
}

          .goal-cont {
          color: white;
          background: black;
        }

.main {
  padding: 30px 40px 65px 40px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
 /* animation: bounceInUp 1s;*/
  position: relative;
  transform: translate3d(0, 3000px, 0);
}

.anim {
  animation: bounceInUp;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.animRevers {
  animation: bounceInUp2;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-timing-function:  linear;
  animation-direction: reverse;
}

/*.anim {
  animation: bounceInUp, bounceInUp;
  animation-delay: 0s, 5s;
  animation-duration: 1s, 1s;
  animation-timing-function: linear, linear;
  animation-direction: normal, reverse;
} */

#title {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: #11294e;
  padding-bottom:  10px;
}

.num {
    display: inline;
   font-weight: bold;
  padding-top: 10px;
  font-size: 90%;
}

#goal-current {
  float: left;
}

#goal-total {
  float: right;
}


.w3-border {
border-radius: 15px;
background: #dee1e3;
}
.w3-grey {
transition-duration: .2s;
border-radius: 15px;
background: #dee1e3;
background: rgb(250,182,0);
background: linear-gradient(90deg, rgba(250,182,0,1) 0%, rgba(235,94,20,1) 100%);
}

.icon {
    position: absolute;
    top: 30px;
    right: 40px;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp2 {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


        document.addEventListener('goalLoad', function(obj) {
            console.log(obj.detail);
            $('#title').html(obj.detail.title);
            $('#goal-current').text(obj.detail.amount.current);
            $('#goal-total').text(obj.detail.amount.target);
            $('#goal-end-date').text(obj.detail.to_go.ends_at);
            $('.w3-grey').css('width', obj.detail.amount.current / obj.detail.amount.target * 100 + "%");
        });
        document.addEventListener('goalEvent', function(obj) {
            console.log(obj.detail);
          $('#progressBar').children(":first").removeClass( "animRevers" ).addClass('anim');
            
            setTimeout(function() {
                if ($('#goal-current').text() == obj.detail.amount.current) {
                    //$('#progressBar').text(obj.detail.amount.current);
                  $('#progressBar').children(":first").removeClass( "anim" ).addClass( "animRevers" );
                }
            }, 5000);
            $('#goal-current').text(obj.detail.amount.current);
            $('.w3-grey').css('width', obj.detail.amount.current / obj.detail.amount.target * 100 + "%");
        });