CODEWITHSUNDEEP
htmlcssformsanimationupload
user2715167
user2715167

Reputation:

CSS stop animation on completion of progress bar

So I am using only css to animate a stripped progress bar on my file upload form. The thing that when the file is successfully uploaded and the upload is finished, (progress bar reach 100%) the animation won't stop! The strips keep moving as if the file is still uploading. Can please anyone show me how to fix this little issue?

My 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;
  }

}

Upvotes: 0

Views: 502

Answers (1)

buildok
buildok

Reputation: 785

You can stop the animation after downloading the file add class .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);
};

Upvotes: 1

Related Questions