Question

我有一个由下面列出的代码生成的进度条。我想使用三角形进度条，如果我单击按钮自动增加宽度（蓝色）。我希望能够完成进度条全三角形状。

＆＃13;

$(document).ready(function() {
  //var progress=0;

  $('.clickbutton').click(function() {
    //progress++;
    $('#bar').css({
      'width': $(this).width() * 2
    });

    //$('#bar').html(progress);
  });
});

＆＃13;

.container {
  width: 200px;
  height: 200px;
  position: relative;
  border-top: 4px solid #e74c3c;
  top: 295px;
  margin: 0px auto;
}
.triangle1 {
  position: absolute;
  margin: auto;
  top: -74px;
  left: 0;
  right: 0;
  width: 137px;
  height: 137px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-top: 4px solid #e74c3c;
  border-left: 4px solid #e74c3c;
}
.progressbar {
  height: 15px;
  background: blue;
  position: absolute;
  z-index: 999999;
  top: -11px;
}
.clickbutton {
  background: antiquewhite;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="progressbar" id="bar"></div>
  <div class="triangle1"></div>
  <div class="clickbutton">Button</div>
</div>

＆＃13;

https://jsfiddle.net/cftt50aw/2/

Answer 1

我创建了一个不同的解决方案，所以你看看它是否适合你的项目..我使用的是免费的vivus库，你需要根据自己的需要对它进行微调，然后将它挂钩最多一些进度调用函数

segs = 6;  // how much segments to split triangle
duration = 120; // time for all animation

var svg = new Vivus('triangle', { 
    duration: duration, 
    start: 'manual', 
    type: 'oneByOne',
  }
);

$('#button').on('click', function(){
  svg.reset().play();
})

$('#segment').on('click', function(){
  if(segs == 1){
    segs = 6; svg.reset();
  } else{
    svg.setFrameProgress( (1 / segs) );
    segs--;
  }
})

在这里你可以看到实例，希望它可以帮助你...干杯，k

http://codepen.io/mkdizajn/pen/oBBQVo?editors=0010

Answer 2

这是一个完全使用CSS的解决方案（除了通过添加类来完成动画的开始）。

document.getElementById("button").addEventListener("click", function() {
	var animation = document.getElementById("animation");
  animation.className = animation.className === "on" ? "" : "on";
})

.segment {
  width: 200px;
  height: 10px;
  background: red;
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
}

.segment1 {
  margin-top: 160px;
  transform: rotate(-45deg);
  transform-origin: top left;
  position: relative;
  z-index: 1;
}
.segment2 {
  transform: rotate(45deg);
  transform-origin: top right;
  margin-left: -121px;
}
.segment3 {
  width: 282px;
  display: block;
  margin-left: 282px;
  margin-top: -7px;
  transform-origin: top left;
  transform: rotate(180deg);
}

.segment span {
  display: inline-block;
  background: blue;
  width: 0;
  height: 100px;
  transition: width 0.3s linear;
}
.segment1 span {
  transition-delay: 0.6s;
}
.segment2 span {
  transition-delay: 0.3s;
}
.segment3 span {
  transition-delay: 0s;
}
#animation.on .segment1 span {
  transition-delay: 0s;
}
#animation.on .segment2 span {
  transition-delay: 0.3s;
}
#animation.on .segment3 span {
  transition-delay: 0.6s;
}

#animation.on .segment span {
  width: 100%;
}

<div id="animation">
  <div class="segment segment1">
    <span></span>
  </div>
  <div class="segment segment2">
    <span></span>
  </div>
  <div class="segment segment3">
    <span></span>
  </div>
</div>

<button id="button">
   Start Animation
</button>

如何为进度条进行三角形设计

2 个答案: