0
のような移行ツールを使用してのGithubに新しいリポジトリをインポートする場合hereブートストラップ3 私は、このプログレスバーを再現しようとしているで作られた素敵でシンプルなリバースプログレスバー例があります。 Hereが私の達成は、これまで、及び以下であるか、here実施例である：は、ブートストラップリバースアニメーションプログレスバーはGithubの
- 最初の例は、静的逆プログレスバー
- である第二の例では、第三のアニメーション予備プログレスバー
- を示します例では、何が起こることは
reverse-progressバーが完全に何らかの理由（多分プロパティのためのパーセントの状態を更新する前に示したされていることである標準のプログレスバー
です？）、正規のprogressbarは正常に動作します。
進捗状況の更新機能の問題UpdateUIReverseProgressBar？
/**
* Bootstrap Progress Bar
* @author Loreto Parisi ([email protected])
*/
UpdateUIProgressBar = function(containerId, progress, text) {
text = text || ''
if (!$('#progressdiv').length) {
var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">' + text + '</div></div>'
$('#' + containerId).append(progress);
} else {
$('#progressbardiv').text(text);
$('#progressbardiv').attr('style', 'min-width: 1em;width: ' + progress + '%;');
$('#progressbardiv').attr('aria-valuenow', progress);
if (progress == 100) {
setTimeout(function() {
$("#progressdiv").remove();
}, 1000 * 2);
}
}
} //UpdateUIProgressBar
/**
* Bootstrap Reverse ProgressBar inspired to Github UI
* @author Loreto Parisi ([email protected])
*/
var UpdateUIReverseProgressBar = function(containerId, progress) {
if (!$('#revprogressdiv').length) {
var progress = '<div id="revprogressdiv" class="reverse-progress-container"><div id="revprogressdiv" class="reverse-progress-bar anim-shrink-x" role="progressbar" style="min-width:1em;width:0%;"></div></div>'
$('#' + containerId).append(progress);
} else {
$('#revprogressdiv').attr('style', 'min-width: 1em;width: ' + progress + '%;');
if (progress == 100) {
setTimeout(function() {
$("#revprogressdiv").remove();
}, 1000 * 2);
}
}
} //UpdateUIReverseProgressBar
var perc = 0,
step = 10;
var interval = setInterval(function() {
perc = perc + step;
UpdateUIReverseProgressBar('myreverseprogress', perc);
UpdateUIProgressBar('myprogress', perc);
if (perc >= 100) clearInterval(interval);
}, 1000).reverse-progress-container {
position: relative;
height: 3px;
background-color: #e5e9eb;
background-image: -webkit-linear-gradient(left, #599e47, #306a94, #492860, #c03d32, #d17337);
background-image: linear-gradient(to right, #599e47, #306a94, #492860, #c03d32, #d17337);
background-size: 100% 3px;
}
.anim-shrink-x {
-webkit-animation-name: shrink-x;
animation-name: shrink-x;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css.map" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<div class="panel panel-default">
<div class="panel-body">
<div class="reverse-progress-container">
<div style="width: 0%; min-width: 0%; animation-duration: 5s;" class="reverse-progress-bar anim-shrink-x"></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="progress" id="myreverseprogress"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="progress" id="myprogress"></div>
</div>
</div>
どのようにシンプルなグレートを参照してください、要素に初期の幅が追加されました!!! – loretoparisi