0
\$\begingroup\$

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>

\$\endgroup\$
  • \$\begingroup\$ Here you can take help of variables to store values you are using multiple times and every time you are calling a method to get the value like $(window).height();, $(window).width();, $(this).find("li"); \$\endgroup\$ – itzmukeshy7 May 1 '17 at 3:34
3
\$\begingroup\$

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>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.