Question

我正在尝试使用css和javascript为我的网站创建一个加载器，它的外观必须类似于

到目前为止，我已经能够创建滑块，但是无法将框放在滑块后面。我该怎么办。

编辑-很抱歉，如果不清楚，但我希望将橙色滑块用作动画加载器

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);
}

Answer 1

到目前为止，我已经能够创建滑块，但是无法将框放在滑块后面。我该怎么办？

一种解决方案是将进度条设置为position: absolute并将其放置在框上。

关于进度百分比。您正在更新数据属性，因此您可以仅基于该值设置条的宽度。可以通过CSS过渡transition: width 1s处理动画。

实时演示：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;
        }
    }
}

Answer 2

我仅使用HTML和CSS解决了该问题：

结果将完全符合您在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>

Answer 3

对于动画，可以使用setInterval每隔width毫秒增加进度条的200。

.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/

使用CSS创建加载器

3 个答案: