CSS-Stop-Animation nach Abschluss des Fortschrittsbalkens

Question

Also verwende ich nur CSS, um eine gestrippte Fortschrittsbalken auf meinem Datei-Upload-Formular zu animieren. Die Sache, dass, wenn die Datei erfolgreich hochgeladen und der Upload abgeschlossen ist, (Fortschrittsbalken erreichen 100%) die Animation nicht aufhören wird! Die Streifen bleiben in Bewegung, als würde die Datei noch hochgeladen. Kann mir bitte jemand zeigen, wie ich dieses kleine Problem beheben kann?

Mein CSS-Code

.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

Sie die Animation nach dem Herunterladen der Datei hinzufügen Klasse .paused

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

UPD_

JavaScript stoppen:

var reader = new FileReader(); 

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

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