How to make triangle design for a progress bar

Question

I have a progress bar generated by the code listed bellow. I am looking to use the triangle progress bar and if I click the button increase the width (blue color) automatically. I want to be able to complete a progress bar full triangle shape.

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

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

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

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

Answer 1

I have created one little different solution, so you take a look if that would fit your project .. I'm using vivus free library and you would need to fine tune it a little to your needs, and hook it up to some progress caller function

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

and here you can see live example,, hope that it can help you.. cheers, k

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

Answer 2

Here is a solution made completely with CSS (except the starting of the animation is done by adding a class).

 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>