填寫x秒進度條

HTML

<div class="progress-bar"> 
    <span class="progress-bar-fill" style="width: 30%"></span> 
</div>

CSS

.progress-bar { 
    width: calc(100% - 6px); 
    height: 5px; 
    background: #e0e0e0; 
    padding: 3px; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 
} 

.progress-bar-fill { 
    display: block; 
    height: 5px; 
    background: #659cef; 
    border-radius: 3px; 
    transition: width 250ms ease-in-out; 
}

它應該顯示滑塊的進度和當前圖像多久將持續到下一個畫面....

如果圖像每隔5秒更改一次，那麼我希望酒吧填滿ou t在5秒內100％...我在javascript和jQuery中總是noob ...

來源

2015-10-13 Kirito

使用'setInterval' – Tushar

你可以使用它。

更新： - 使transition 5秒。

transition: width 5s ease-in-out;

$('.progress-bar-fill').delay(1000).queue(function() { 
 
     $(this).css('width', '100%') 
 
    });

.progress-bar { 
 
    width: calc(100% - 6px); 
 
    height: 5px; 
 
    background: #e0e0e0; 
 
    padding: 3px; 
 
    border-radius: 3px; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 
 
} 
 

 
.progress-bar-fill { 
 
    display: block; 
 
    height: 5px; 
 
    background: #659cef; 
 
    border-radius: 3px; 
 
    /*transition: width 250ms ease-in-out;*/ 
 
    transition: width 5s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress-bar"> 
 
    <span class="progress-bar-fill" style="width: 30%"></span> 
 
</div>

我希望它會幫助你。

來源

2015-10-13 07:36:52

抱歉，但那不是......我不想動畫在5秒後發生，然後只填寫一個......我想立即填充過程持續5秒... – Kirito

哦，好吧，讓我更新。 –

請現在檢查， –

你可以讓你的jQuery一次性設置過渡聲明。

爲了填補5S：

$(".progress-bar-fill").css({"width":"100%","transition":"5s"});

要清空瞬間：

$(".progress-bar-fill").css({"width":"0%","transition":"none"});

來源

2017-04-08 06:14:00

填寫x秒進度條

回答

相關問題