create loader using css

Question

I am trying to create a loader for my website using css and javascript and it has to look something like

so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.

Edit- Sorry if was not clear but I want the orange slider as an animated loader

HTML -

 <div style="margin-left:400px; margin-right:400px " class="progress-wrap 
 progress" data-progress-percent="20">
   <div class="progress-bar progress"></div>
 </div>

CSS -

@import "compass/css3";
.red{
    background:black;
  margin-left:300px;
  top:100px;

}
.box{
    width:100px !important;
    height:100px !important;
  z-index:-1;

}
.progress {
  width: 100%;
  height: 10px;
}
.progress-wrap {
  background: #f80;
  margin: 200px 0;
  overflow: hidden;
  position: relative;
  .progress-bar {
    background: white;
    left: 0;
    position: absolute;
    top: 0;
  }
}

Javascript-

moveProgressBar();
$(window).load(function() {
    moveProgressBar();
});

function moveProgressBar() {
  console.log("moveProgressBar");
    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
    var getProgressWrapWidth = $('.progress-wrap').width();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = 6500;


    $('.progress-bar').stop().animate({
        left: progressTotal
    }, animationLength);
}

Possible duplicate of [Progress Bar with HTML and CSS](https://stackoverflow.com/questions/7190898/progress-bar-with-html-and-css) — Baruch, Jul 23 '18 at 17:45
as you can see in the picture behind the progress bar there are two boxes I am unable to place the boxes behind the progress bar — dj43, Jul 23 '18 at 17:51

wdm · Accepted Answer · 2018-07-23T19:58:27.257

So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?

One solution is to set the progress bar to position: absolute and position it over the boxes.

As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.

Live demo: http://jsfiddle.net/rg0bq23p/45/

Javascript

var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';

HTML

<div class="wrapper">
    <div id="progress" class="progress" data-progress="20">
        <div class="bar"></div>
    </div>
    <div class="box dark-gray"></div>
    <div class="box gray"></div>
</div>

SCSS

.wrapper {
    width: 400px;
    margin: 0 auto;
    display: flex;
    position: relative;

    .progress {
        position: absolute;
        top: 150px;
        left: -100px;
        z-index: 1;
        width: 90%;
        background-color: #fff3e2;

        .bar {
            width: 0;
            height: 15px;
            background-color: #ffa41c;
            transition: width 1s;
        }
    }
    .box {
        width: 200px;
        height: 200px;

        &.gray {
            background-color: #bbb;
        }
        &.dark-gray {
            background-color: #888;
        }
    }
}

your way works perfectly for only css but now i have no idea how to work with js for animation. If you can help it will be great. — dj43, Jul 23 '18 at 18:26
@user678413 Updated wdm's answer with jquery animation: http://jsfiddle.net/rg0bq23p/40/ — Chase DeAnda, Jul 23 '18 at 19:34
@user678413 I've updated the answer to include updating the width of the progress bar with vanilla javascript along with a CSS transition to handle the animation. — wdm, Jul 23 '18 at 19:55

score 0 · Answer 2 · answered Jul 23 '18 at 19:10

I solved the problem using only HTML and CSS:

The result will be exactly as you want in the example you mentioned

.main{
 float: right;
}
.box{
  position: relative;
}
.bar{
  position: absolute;
  top: 105px;
  right: 111px;
}
.left{
  width: 143px;
  height: 143px;
  background: #595d59;
  display: inline-block;
  margin-right: -2px;
  }
  
  .right{
  width: 143px;
  height: 143px;
  background: #b8b9b8;
  display: inline-block;
  margin-left: -2px;
  }
  
  .progress-bar{
  width: 268px;
  height: 11px;
  background: #f26522;
  }

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 <div class="main" > 
   <div class="box">
     <div class ="left"></div>
     <div class ="right"></div>
   </div>
   <div class="bar">
     <div class="progress-bar"></div>
   </div>
   
 </div>

</body>
</html>

Unmitigated · Answer 3 · 2018-07-23T20:37:55.897

For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.

.main{
 float: right;
}
.box{
  position: relative;
}
.bar{
  position: absolute;
  top: 105px;
  right: 111px;
  width: 100%;
  border: 1px solid black;
}
.left{
  width: 143px;
  height: 143px;
  background: #595d59;
  display: inline-block;
  margin-right: -2px;
  }
  
  .right{
  width: 143px;
  height: 143px;
  background: #b8b9b8;
  display: inline-block;
  margin-left: -2px;
  }
  
  .progress-bar{
  width: 5%;
  height: 11px;
  background: #f26522;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
 <div class="main" > 
   <div class="box">
     <div class ="left"></div>
     <div class ="right"></div>
   </div>
   <div class="bar">
     <div class="progress-bar"></div>
   </div>
   
 </div>
 <script>
var width = 5;
var progress;
progress= setInterval(function(){
   $('.progress-bar').css("width", width + "%");
    width += 5;
    if(width>=105){
     clearInterval(progress);
    }
  }, 200);
    
</script>

</body>
</html>

JSFiddle: http://jsfiddle.net/21jdo8q7/1/

create loader using css

3 Answers3