我如何設計一個圓形垂直加載進度條？

Question

我正在製作一個非常獨特的進度條，它的外觀看起來就像是裝滿液體的玻璃球。不幸的是，由於圓形的形狀，修改高度的傳統方法效果不佳（如此小提琴https://jsfiddle.net/usuwvaq5/2/所示）。

正如您所看到的，讓div高度「向上滑動」不是所需的視覺效果。我也嘗試玩css clip，但無法讓它爲我工作。如何用第二張圖像創建玻璃「填充」的視覺效果？

Answer 1

只需添加background-position:bottom;到#inner-progress：

#inner-progress { 
    background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png); 
    background-color: transparent; 
    background-position:bottom; 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
    bottom: 0; 
    height: 0%; 
} 

JSFiddle Demo

Answer 2

雅各布·格雷可能有最好的答案，但在這裏是一種替代方案：

Fiddle

這種方法使用CSS爲動畫，而不是javascript。 JS只在這裏用來觸發動畫，其餘的都是css。

這使用css transition屬性爲「動畫」高度，因爲它從100％變爲0％。 html中唯一值得注意的變化是我將inner的背景與outer交換。

也許這個答案將是一個更好的解決方案給這個線程的未來讀者 - 取決於他們的實施和/或偏好。

$(document).ready(function() { 
 
    $('#inner-progress').addClass("load"); 
 
});

#outer-progress { 
 
    background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png); 
 
    background-color: transparent; 
 
    border: 0; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: relative; 
 
} 
 

 
#inner-progress { 
 
    background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png); 
 
    background-color: transparent; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    bottom: 0; 
 
    height: 100%; 
 
    transition: height 3s; 
 
    -webkit-transition: height 3s; 
 
} 
 

 
.progress-value { 
 
    color: #FFF !important; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 40%; 
 
} 
 

 
.load{ 
 
    height: 0% !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="outer-progress"> 
 
    <div id="inner-progress" value="0" max="100"></div> 
 
    <span class="progress-value">0%</span> 
 
</div>