幻灯片中显示切换进度效果实现-爱 • 范儿

其实就是实现上图的效果

结构代码

<ol class="carousel-indicators">
            <li data-target="#Indexcarousel" data-slide-to="0" class="active">
                <div class="circle_process">
                    <div class="wrapper right">
                        <div class="circle rightcircle"></div>
                    </div>
                    <div class="wrapper left">
                        <div class="circle leftcircle"></div>
                    </div>
                </div>
            </li>
            <!---->
            <li data-target="#Indexcarousel" data-slide-to="1">
                 <div class="circle_process">
                    <div class="wrapper right">
                        <div class="circle rightcircle"></div>
                    </div>
                    <div class="wrapper left">
                        <div class="circle leftcircle"></div>
                    </div>
                </div>
            </li>
</ol>

样式代码

.carousel-indicators li.active .circle_process {
  margin-top: -2px;
}
.carousel-indicators li.active .circle_process{
  position: relative;
  width: 24px;
  height : 24px;
  border: 4px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-sizing: border-box;
}
.carousel-indicators li.active .circle_process .wrapper{
  width: 12px;
  height: 25px;
  position: absolute;
  top: -4px;
  overflow: hidden;
}
.carousel-indicators li.active .circle_process .right{
  right: -4px;
}
.carousel-indicators li.active .circle_process .left{
  left: -4px;
}
.carousel-indicators li.active .circle_process .circle{
  width: 17px;
  height: 17px;
  border: 4px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform : rotate(-135deg);
  background-color: transparent;
}
.carousel-indicators li.active .circle_process .rightcircle{
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  right: 0;
  -webkit-animation: circle_right 4.5s linear infinite;
}
.carousel-indicators li.active .circle_process .leftcircle{
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  left: 0;
  -webkit-animation: circle_left 4.5s linear infinite;
}
@-webkit-keyframes circle_right{
  0%{
      -webkit-transform: rotate(-135deg);
  }
  50%,100%{
      -webkit-transform: rotate(45deg);
  }
}
@-webkit-keyframes circle_left{
  0%,50%{
      -webkit-transform: rotate(-135deg);
  }
  100%{
      -webkit-transform: rotate(45deg);
  }
}

 

原理就是设置slide切换的时间为5s,然后css实现圆环加载动画的执行时间为5s,两个时间一致就让人以为动画是一个倒计时,标示slide切换时间。