Square Progress Indicator

Question

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("<ul><li></li><li></li><li></li><li></li></ul>")
	.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 > $(window).width() ? $(window).width() : progress);
		progress -= $(window).width();
		$(this).find("li").eq(1).height(progress > $(window).height() ? $(window).height() : progress);
		progress -= $(window).height();
		$(this).find("li").eq(2).width(progress > $(window).width() ? $(window).width() : progress);
		progress -= $(window).width();
		$(this).find("li").eq(3).height(progress > $(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squareProgress" progress="75"></div>

Answer 1

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("<ul><li></li><li></li><li></li><li></li></ul>")
  .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 < 4; i++){
      if(i % 2 == 0){
        $li.eq(i).width(progress > wW ? wW : progress);
        progress -= wW;
      }else{
        $li.eq(i).height(progress > 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squareProgress" progress="75"></div>