simple upload animation

using bootstrap 3 glyphicons and jQuery

by Ercan Cicek

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="uploadAnimCircle-cont flex-it">
  <div class="uploadAnimCircle-fill"></div>
  <span class="uploadProgCont"></span>
</div>

SCSS

$uploadEleSize: 15em;
$uploadEleCol: rgba(115, 201, 227, 0.5);

.uploadAnimCircle-cont {
    position: relative;
    width: $uploadEleSize;
    height: $uploadEleSize;
    border-radius: 50%;
    background-color: #efefef;
    overflow: hidden;
    margin: 2em;
}

.uploadAnimCircle-fill {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $uploadEleCol;
}

.uploadProgCont {
    position: relative;
    font-size: $uploadEleSize / 3;
}

.flex-it {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

JavaScript

$(function() { 
	startUploadAnim(0);
});

function startUploadAnim(uploadStatus) {
  $(".uploadProgCont")
  	.empty()
    .removeClass("glyphicon glyphicon-ok");
  var demoUploadInt = setInterval(function () {
    if (uploadStatus > 100) {
    	uploadAnimTo(100);
      clearInterval(demoUploadInt);
      return false;
    }
    uploadAnimTo(uploadStatus);
    uploadStatus += randomBetween(1, 20);
  }, randomBetween(250, 750));
}

function uploadAnimTo(progressVal) {
  $(".uploadAnimCircle-fill").animate({ 
  		top: 100 - progressVal + "%" 
    }, 500, "linear", function () {
      if (progressVal === 100) {
        $(".uploadProgCont").text("").addClass("glyphicon glyphicon-ok");
      } else {
        $(".uploadProgCont").text(progressVal + (progressVal > 0 ? "%" : ""));
      }
  	}
  );
}

function randomBetween(min, max) {
	return Math.floor((Math.random() * max) + min);
}