垂直進度條造型

Question

如何與像使用jQuery或CSS和SVG進度條的水形成了一個容器？

Answer 1

我創建的SVG與玻璃周圍的白色層，以防止填充的重疊。然後，我創建了一個簡單的函數來設置進度，這是剛剛設置用作填充在SVG多邊形元素上的平移Y屬性。 SVG的viewbox高度爲100，因此可以輕鬆使用百分比值來獲取進度。

http://jsfiddle.net/7op7re9j/3/

JS

function setProgress(percent) { 
     if(percent > 100) percent = 100; 
     if(percent < 0) percent = 0; 
     var translate = "translateY("+(100-percent)+"px)"; 
     $('.progress').css({ 
      "transform":translate, 
      "-webkit-transform":translate 
     }); 
} 

SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 70 100" enable-background="new 0 0 70 100" xml:space="preserve"> 
<polygon class="progress" x="0px" y="10px" fill="#3094D1" points="60.8,98 7.1,98 2.1,5.4 67.9,5.4 "/> 
<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="60.8,98.7 7.1,98.7 2.1,6 67.9,6 "/> 
<path class="background" fill="#FFFFFF" d="M0,0v100h70V0H0z M60.8,98.7H7.1L2.1,6h65.9L60.8,98.7z"/> 
</svg> 

Answer 2

我做了一些基本思路小提琴：

JS

$(document).ready(function(){ 
    $('button').on('click',function(){ 
     $('#container, .water, .water2').animate({  
      height: "200px"  
     }, 5000); 
    }); 
}); 

HTML

<button>click</button> 
<div id="container"> 
    <div class="water"></div> 
    <div class="water2"></div> 
</div> 

CSS

button { 
    margin-bottom:40px; 
} 

#container { 
    height:0px; 
    width:200px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

.water { 
    height:inherit; 
    width:100px; 
    background:lightblue; 
    transform:skewX(10deg); 
    margin-left:20px; 
    position:absolute; 
} 

.water2 { 
    height:inherit; 
    width:100px; 
    background:lightblue; 
    transform:skewX(-10deg); 
    margin-left:60px; 
    position:absolute; 
} 

Fiddle

Answer 3

嘗試利用canvas

var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.lineWidth = "2"; 
 
ctx.moveTo(25, 25); 
 
ctx.lineTo(50, 100); 
 
ctx.lineTo(100, 100); 
 
ctx.lineTo(125, 25); 
 
ctx.lineTo(24.25, 25); 
 
ctx.stroke(); 
 
ctx.font = "18px monospace"; 
 
ctx.fillText("< 0%", 120, 106); 
 
ctx.fillText("< 50%", 130, 70); 
 
ctx.fillText("< 100%", 145, 32); 
 
ctx.strokeStyle = "skyblue"; 
 
ctx.lineWidth = 1; 
 
var x = 51, y = 98, l = 100; 
 
for (var i = 0; i < 72; i++) { 
 
    setTimeout(function() { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x, y); 
 
    ctx.lineTo(l, y); 
 
    x -= .34; y -= 1; l += .33; 
 
    ctx.stroke(); 
 
    }, i * 100) 
 
}

<canvas id="canvas" width="300" height="150"></canvas>