Загрузить панель навыков, когда она видна на экране

Мне нужно загружать индикатор выполнения только тогда, когда он виден на экране. Я использую следующий код

          <div class = "col-md-6 right">
               <div class = "skill">
                 <div class = "progressWrap">
                     <span class = "title" style = "">3D Visualizer</span>  <span class = "title" style = "float: right;">95%</span>
                   <div class = "progress">
                     <div class = "progress-bar" role = "progressbar" aria-valuenow = "95" aria-valuemin = "0" aria-valuemax = "100" style = "max-width: 95%">
                     </div>
                   </div>
                 </div>
                 <div class = "progressWrap">
                     <span class = "title" style = "">Graphic Designer</span>  <span class = "title" style = "float: right;">85%</span>
                   <div class = "progress">
                     <div class = "progress-bar" role = "progressbar" aria-valuenow = "85" aria-valuemin = "0" aria-valuemax = "100" style = "max-width: 85%">
                      </div>
                   </div>
                 </div>
                   <div class = "progressWrap">
                     <span class = "title" style = "">Marketing</span>  <span class = "title" style = "float: right;">90%</span>
                   <div class = "progress">
                     <div class = "progress-bar" role = "progressbar" aria-valuenow = "90" aria-valuemin = "0" aria-valuemax = "100" style = "max-width: 90%">
                      </div>
                   </div>
                 </div>
               </div>
             </div>

CSS

/*PROGRESS BAR*/
.progress{
    height: 5px;
    margin-top: 10px;
}
.progress-bar {
    width: 0;
    background:#000000;
    -webkit-animation: progress 2.5s ease-in-out forwards;
          animation: progress 2.5s ease-in-out forwards;
}
.progress-bar .title {
  opacity: 0;
  -webkit-animation: show 0.35s forwards ease-in-out 0.5s;
          animation: show 0.35s forwards ease-in-out 0.5s;
}

@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.skill{
    width: 80%;
    padding: 10px;
    padding-top: 50px;
}
.skill span{
    color: #939393;
    font-family: 'arial';

}
.skill .progressWrap{
    padding:5px;
}

При использовании этого кода индикатор выполнения загружается при загрузке страницы. Поэтому, когда я прокручиваю этот раздел, все индикаторы выполнения уже загружены. Но мне нужно, чтобы он загружался, когда он виден на экране. Может кто-нибудь помочь мне