用CSS/jQuery隨着時間的推移填充圓的背景色

我有一個在setInterval上運行的JS腳本，腳本進度存儲在progressPercentage變量中。我使用這個百分比值來修改具有bgcolor的子div的寬度。所以隨着它變寬，它開始填充更多的父div。用CSS/jQuery隨着時間的推移填充圓的背景色

這是非常簡單的使用方形，但我很難填充成圓形(border-radius: 100%)。

現在，我使用2個的div，我知道有這樣做的更好的辦法，但現在這是什麼樣子：

<div id="load-bar-frame"> 
    <div id="load-bar"></div> 
</div>

這裏是CSS：

#load-bar-frame { 
    height: 200px; 
    width: 200px; 
    border-radius: 100%; 
    padding: 3px; 
    border: 1px solid #fff; 
    margin: 20px auto 0 auto; 
    display: block; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
} 

#load-bar { 
    border-radius: 100%; 
    background: #fff; 
    width: 0%; 
    height: 100%; 
}

JS通過增加#load-bar的寬度來填充背景，以使其寬度增加，填滿#load-bar-frame div。

問題是，在子div的寬度將從0開始，所以它是一個真正的串圈，並不適合在父div。

JSFiddle

所以我在尋找將bgcolor填充的更好的方法。

來源

2015-11-10 Chirpizard

請提供jsfiddle。 – Alex

@alirezasafian添加小提琴鏈接：http://jsfiddle.net/Chirpizard/6saxtnen/ – Chirpizard

嘗試：

var per = 0; 
 
setInterval(function(){ 
 
per++; 
 
if(per <= 100){ 
 
    $('#load-bar').css({background: "linear-gradient(to right, #000000 "+per+"%,transparent "+per+"%,transparent 100%)"}); 
 
    
 
} 
 

 
}, 100);

#load-bar-frame { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    padding: 3px; 
 
    border: 1px solid #000; 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
    position: absolute; 
 
    top 20px; 
 
    left: 20px; 
 
} 
 

 
#load-bar { 
 
    width: 100%; /* in this case 20% would be the current progress */ 
 
    height: 100%; 
 
    border-radius: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="load-bar-frame"> 
 
    <div id="load-bar"></div> 
 
</div>

http://jsfiddle.net/6saxtnen/2/

來源

2015-11-10 05:25:10 madalinivascu

嘿！這完美的作品！謝謝！ – Chirpizard

var per = 1; 
 
jQuery(document).ready(function(){ 
 
    setInterval(changeSize, 100); 
 
}); 
 

 
function changeSize(){ 
 
\t per++; 
 
    if(per <= 100){ 
 
    \t $("#load-bar").width(per + "%"); 
 
     $("#load-bar").height(per + "%"); 
 
     $("#load-bar").css("top" , (50 - (per/2)) + "%"); 
 
     $("#load-bar").css("left" , (50 - (per/2)) + "%") 
 
    } 
 
}

#load-bar-frame { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    padding: 3px; 
 
    border: 1px solid #000; 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
    position: relative; 
 
    top 20px; 
 
    left: 20px; 
 
} 
 

 
#load-bar { 
 
    background: #000; 
 
    width: 20%; /* in this case 20% would be the current progress */ 
 
    height: 20%; 
 
    border-radius: 100%; 
 
    top:50%; 
 
    left:50%; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="load-bar-frame"> 
 
    <div id="load-bar"></div> 
 
</div>

來源

2015-11-10 05:16:45 Mitul

真棒，這可能工作。我將需要修改它以從下往上填充。我會看看是否有其他解決方案發布。謝謝！ – Chirpizard

我已經添加了另一個ans，滑動 – Mitul

var per = 1; 
 
jQuery(document).ready(function(){ 
 
    setInterval(changeSize, 100); 
 
}); 
 

 
function changeSize(){ 
 
\t per++; 
 
    if(per <= 100){ 
 
    \t $("#load-bar").width(per + "%"); 
 

 
    } 
 
}

#load-bar-frame { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    padding: 3px; 
 
    border: 1px solid #000; 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
    position: relative; 
 
    top 20px; 
 
    left: 20px; 
 
    overflow:hidden; 
 
} 
 

 
#load-bar { 
 
    background: #000; 
 
    width: 20%; /* in this case 20% would be the current progress */ 
 
    height: 100%; 
 
    
 
    top:0%; 
 
    left:0%; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="load-bar-frame"> 
 
    <div id="load-bar"></div> 
 
</div>

來源

2015-11-10 05:19:37 Mitul

用CSS/jQuery隨着時間的推移填充圓的背景色

回答

相關問題