Square Progress Indicator On the Beme app, while a video plays, the border acts a progress bar, filling from upper left to upper right to lower right to lower left.  I want to achieve that.  And I have, but my code is incredibly messy.  I don't like the repetitive checks and -='s.  Is there anyway to trim that fat from the code?  If you update the progress bar's current progress attribute, it will update how many sides has a colored border.



$(".squareProgress")
 .append("&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;")
 .change(function () {
  $(this).trigger("updateProgress");
 })
 .on("updateProgress", function () {
  max = $(window).width()*2 + $(window).height()*2 - 30;
  progress = max*(parseInt($(this).attr("progress"))/100);
  $(this).find("li").eq(0).width(progress &gt; $(window).width() ? $(window).width() : progress);
  progress -= $(window).width();
  $(this).find("li").eq(1).height(progress &gt; $(window).height() ? $(window).height() : progress);
  progress -= $(window).height();
  $(this).find("li").eq(2).width(progress &gt; $(window).width() ? $(window).width() : progress);
  progress -= $(window).width();
  $(this).find("li").eq(3).height(progress &gt; $(window).height() ? $(window).height() : progress);
  progress -= $(window).height();
 })
 .trigger("change");
body {
 padding:0;
 margin:0;
}

.sqaureProgress {
 position:absolute;
 width:100%;
 height:100%;
}

.squareProgress ul {
 padding:0;
 margin:0;
 list-style-type:none;
}

.squareProgress ul li {
 position:absolute;
}

.squareProgress ul li:nth-child(1) {
 left:0;
 top:0;
 width:calc(100% - 10px);
 height:10px;
 background:blue;
}

.squareProgress ul li:nth-child(2) {
 right:0;
 top:0;
 height:calc(100% - 10px);
 width:10px;
 background:red;
}

.squareProgress ul li:nth-child(3) {
 right:0;
 bottom:0;
 width:calc(100% - 10px);
 height:10px;
 background:green;
}

.squareProgress ul li:nth-child(4) {
 left:0;
 bottom:0;
 height:calc(100% - 10px);
 width:10px;
 background:yellow;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="squareProgress" progress="75"&gt;&lt;/div&gt;
You can take help of variables to reduce the methods calling also to reduce the number of repeated statements you can go with for loop:



$(".squareProgress")
  .append("&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;")
  .change(function() {
    $(this).trigger("updateProgress");
  }).on("updateProgress", function() {
    var wW = $(window).width();
    var wH = $(window).height();
    var $li = $(this).find("li");

    max = wW * 2 + wH * 2 - 30;
    progress = max * (parseInt($(this).attr("progress")) / 100);
    
    for(var i = 0; i &lt; 4; i++){
      if(i % 2 == 0){
        $li.eq(i).width(progress &gt; wW ? wW : progress);
        progress -= wW;
      }else{
        $li.eq(i).height(progress &gt; wH ? wH : progress);
        progress -= wH;      
      }      
    }    
  }).trigger("change");
body {
  padding: 0;
  margin: 0;
}

.sqaureProgress {
  position: absolute;
  width: 100%;
  height: 100%;
}

.squareProgress ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.squareProgress ul li {
  position: absolute;
}

.squareProgress ul li:nth-child(1) {
  left: 0;
  top: 0;
  width: calc(100% - 10px);
  height: 10px;
  background: blue;
}

.squareProgress ul li:nth-child(2) {
  right: 0;
  top: 0;
  height: calc(100% - 10px);
  width: 10px;
  background: red;
}

.squareProgress ul li:nth-child(3) {
  right: 0;
  bottom: 0;
  width: calc(100% - 10px);
  height: 10px;
  background: green;
}

.squareProgress ul li:nth-child(4) {
  left: 0;
  bottom: 0;
  height: calc(100% - 10px);
  width: 10px;
  background: yellow;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="squareProgress" progress="75"&gt;&lt;/div&gt;