進捗バーの三角形を作成する方法

Question

以下のコードでプログレスバーを生成しました。三角形のプログレスバーを使用して、ボタンをクリックすると幅（青色）を自動的に増やしたいと思っています。プログレスバーの完全三角形を完成させたい。

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

私はそれがあなたのプロジェクトに合う場合は、見てみて..私は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() { 
 
\t 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>