如何使用CSS创建加载程序?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (84)

我正在尝试使用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);
}
提问于
用户回答回答于

一种解决方案是将进度条设置为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;
        }
    }
}
用户回答回答于

我只使用HTML和CSS解决了这个问题:

结果会和你想要的一样 https://i.stack.imgur.com/0bmK8.png

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

扫码关注云+社区

领取腾讯云代金券