Остановка анимации CSS при завершении индикатора выполнения

Question

Так что я использую только CSS, чтобы анимировать полосу прогресса в моей файловой загрузке. То, что, когда файл успешно загружен и загрузка завершена, (индикатор выполнения достигает 100%), анимация не остановится! Полоски продолжают перемещаться, как будто файл все еще загружается. Может ли кто-нибудь показать мне, как исправить эту маленькую проблему?

Мой CSS код

.ajax-file-upload-bar { 
    background-color: #0ba1b5; 
    width: 0; 
    height: 30px; 
    border-radius: 3px; 
    color:#FFFFFF; 
    font-family: calibri; 
    background-image: linear-gradient(
    -45deg, 
    rgba(255,255,255,0.25) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255,255,255,0.25) 50%, 
    rgba(255,255,255,0.25) 75%, 
    transparent 75%, 
    transparent 
); 
    background-size: 40px 40px; 
    display: block; 
    height: 100%; 
    width: 100%; 
    animation: anim_stripes 1s linear infinite; 
    -webkit-animation: anim_stripes 1s linear infinite; 
} 
@keyframes anim_stripes { 
    from { 
    background-position: 0 0; 
    } 
    to { 
    background-position: 40px 40px; 
    } 

} 

Answer 1

Вы можете остановить анимацию после загрузки файла добавить класс .paused

.ajax-file-upload-bar.paused { 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
} 

UPD_

JavaScript:

var reader = new FileReader(); 

reader.onload = function(e) { 
    var file = e.target.result; 

    $('.ajax-file-upload-bar').addClass('paused); 
};