如何實現自定義進度條

-2

我需要這些背景進度條。最初顏色較厚，以後顏色較淺。如何實現這個進度條的設計？如何實現自定義進度條

.progressOuterBody { 
 
    border: 1px solid grey; 
 
    height: 25px; 
 
    border-radius: 64px; 
 
    padding: 1px 10px; 
 
} 
 
.progressBarInnerBody { 
 
    width: 25%; 
 
    background: red; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, red, yellow); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, red, yellow); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, red, yellow); 
 
    /* For Firefox 3.6 to 15 */ 
 
    border-radius: 45px; 
 
}

<div class="progressOuterBody"> 
 
    <div class="progressBarInnerBody"> 
 

 
    </div> 
 
</div>

來源

2016-11-21 guru buddy

@SumnerEvans請參閱我code.I需要的背景顏色CSS。 –

如果你使用的引導，你可以使用他們的進度條爲好。他們非常定製。在此處閱讀更多信息：http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

來源

2016-11-21 17:13:58

我想要進度條的背景色css。 –

我不確定你在這裏問什麼。你想要它的顏色？就像，你不知道是什麼顏色？ –

我們只能應用一種顏色。背景中有兩種顏色。 –

您可以在progressBarInnerBody內再添加一個<div>（.shade）。 .shade將覆蓋你的整個內部div，然後添加線性漸變到該.shade。

更新：

加條紋

問題在你的提琴是：

在progressBarInnerBody你應該補充的條紋，而不是在shade
你需要p rovide的background-size到progressBarInnerBody

下面是摘錄：

function slider_changed(e) { 
 
    $(".progressBarInnerBody").css('width', e.target.value + "%"); 
 
}

.progressOuterBody { 
 
    border: 1px solid grey; 
 
    height: 25px; 
 
    border-radius: 64px; 
 
    padding: 3px; 
 
} 
 
.progressBarInnerBody { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100%; 
 
    background: dodgerblue; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, dodgerblue, dodgerblue); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, dodgerblue, dodgerblue); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, dodgerblue, dodgerblue); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
 
    border-radius: 45px; 
 
    background-size: 60px 60px; 
 
    animation: barberpole 0.5s linear infinite; 
 
} 
 
.shade { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Firefox 3.6 to 15 */ 
 
    border-radius: 45px; 
 
} 
 
@keyframes barberpole { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 60px 0; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="progressOuterBody"> 
 
    <div class="progressBarInnerBody"> 
 
     <div class="shade"> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <input type="range" id="slider" value="80" oninput="slider_changed(event)"> 
 

 
</body> 
 

 
</html>

來源

2016-11-22 11:36:33 sam

謝謝@sam .... –

@gurubuddy對它有幫助嗎？ – sam

它幫助，但是當我添加動畫條紋css然後我沒有得到如上圖picture.Could你能幫我嗎？ –

如何實現自定義進度條

回答

相關問題