类似 Github 的 Bootstrap 反向动画进度条 [英] Bootstrap Reverse Animated Progress Bar like Github

查看：52
本文介绍了类似 Github 的 Bootstrap 反向动画进度条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用迁移工具将新存储库导入 Github 时这里有一个很好且简单的反向进度条使用 Bootstrap 3 制作的示例.我正在尝试重现此进度条.这里是我迄今为止的成就，下面是这里 是一个工作示例:

  • 第一个例子是一个静态反向进度条
  • 第二个示例显示了动画保留进度条
  • 第三个例子是一个标准的进度条

发生的情况是 reverse-progress 条在由于某种原因更新百分比状态之前完全显示(可能是属性 background-image?)，而常规progressbar 工作正常.

进度更新函数UpdateUIReverseProgressBar有什么问题?

/*** 引导进度条* @author Loreto Parisi (loretoparisi@gmail.com)*/UpdateUIProgressBar = function(containerId, progress, text) {文字 = 文字 ||''如果 (!$('#progressdiv').length) {var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">'+ 文本 + '</div></div>'$('#' + containerId).append(progress);} 别的 {$('#progressbardiv').text(text);$('#progressbardiv').attr('style', 'min-width: 1em;width:' + progress + '%;');$('#progressbardiv').attr('aria-valuenow', progress);如果(进度== 100){设置超时(函数(){$("#progressdiv").remove();}, 1000 * 2);}}}//更新UIProgressBar/*** 受 Github UI 启发的 Bootstrap Reverse ProgressBar* @author Loreto Parisi (loretoparisi@gmail.com)*/var UpdateUIReverseProgressBar = function(containerId, progress) {如果 (!$('#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);} 别的 {$('#revprogressdiv').attr('style', 'min-width: 1em;width:' + progress + '%;');如果(进度== 100){设置超时(函数(){$("#revprogressdiv").remove();}, 1000 * 2);}}}//更新UIReverseProgressBarvar perc = 0,步 = 10;var 间隔 = setInterval(function() {perc = perc + 步长；UpdateUIReverseProgressBar('myreverseprogress', perc);UpdateUIProgressBar('myprogress', perc);如果 (perc >= 100) clearInterval(interval);}, 1000)

.reverse-progress-container {位置:相对；高度:3px；背景颜色:#e5e9eb；背景图像:-webkit-线性梯度(左，#599e47，#306a94，#492860，#c03d32，#d17337)；背景图像:线性渐变(向右，#599e47，#306a94，#492860，#c03d32，#d17337)；背景尺寸:100% 3px；}.anim-shrink-x {-webkit-animation-name:收缩-x；动画名称:收缩-x；-webkit-animation-duration: 0.3s;动画持续时间:0.3s；-webkit-animation-fill-mode:转发；动画填充模式:向前；-webkit-animation-timing-function:缓入缓出；动画计时功能:缓入缓出；-webkit-animation-delay: 0.5s;动画延迟: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 class="panel panel-default"><div class="panel-body"><div class="progress" id="myreverseprogress"></div>

<div class="panel panel-default"><div class="panel-body"><div class="progress" id="myprogress"></div>

解决方案

我给元素添加了初始宽度，见代码注释

/*** 引导进度条* @author Loreto Parisi (loretoparisi@gmail.com)*/UpdateUIProgressBar = function(containerId, progress, text) {文字 = 文字 ||''如果 (!$('#progressdiv').length) {var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">'+ 文本 + '</div></div>'$('#' + containerId).append(progress);} 别的 {$('#progressbardiv').text(text);$('#progressbardiv').attr('style', 'min-width: 1em;width:' + progress + '%;');$('#progressbardiv').attr('aria-valuenow', progress);如果(进度== 100){设置超时(函数(){$("#progressdiv").remove();}, 1000 * 2);}}}//更新UIProgressBar/*** 受 Github UI 启发的 Bootstrap Reverse ProgressBar* @author Loreto Parisi (loretoparisi@gmail.com)*/var UpdateUIReverseProgressBar = function(containerId, progress) {如果 (!$('#revprogressdiv').length) {/* 在下面添加宽度 0px */var progress = '<div id="revprogressdiv" class="reverse-progress-container" style="width: 0px;"><div id="revprogressdiv" class="reverse-progress-bar anim-shrink-x" role="progressbar" style="min-width:1em;width:0%;"></div></div>'$('#' + containerId).append(progress);} 别的 {$('#revprogressdiv').attr('style', 'min-width: 1em;width:' + progress + '%;');如果(进度== 100){设置超时(函数(){$("#revprogressdiv").remove();}, 1000 * 2);}}}//更新UIReverseProgressBarvar perc = 0,步 = 10;var 间隔 = setInterval(function() {perc = perc + 步长；UpdateUIReverseProgressBar('myreverseprogress', perc);UpdateUIProgressBar('myprogress', perc);如果 (perc >= 100) clearInterval(interval);}, 1000)

.reverse-progress-container {位置:相对；高度:3px；背景颜色:#e5e9eb；背景图像:-webkit-线性梯度(左，#599e47，#306a94，#492860，#c03d32，#d17337)；背景图像:线性渐变(向右，#599e47，#306a94，#492860，#c03d32，#d17337)；背景尺寸:100% 3px；}.anim-shrink-x {-webkit-animation-name:收缩-x；动画名称:收缩-x；-webkit-animation-duration: 0.3s;动画持续时间:0.3s；-webkit-animation-fill-mode:转发；动画填充模式:向前；-webkit-animation-timing-function:缓入缓出；动画计时功能:缓入缓出；-webkit-animation-delay: 0.5s;动画延迟: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 class="panel panel-default"><div class="panel-body"><div class="progress" id="myreverseprogress"></div>

<div class="panel panel-default"><div class="panel-body"><div class="progress" id="myprogress"></div>

When importing new repos to Github using the migration tool here there is a nice and simple Reverse Progress Bar example made with Bootstrap 3. I'm trying to reproduce this progress bar. Here there is my achievement so far, and below or here is a working example:

What happens is that the reverse-progress bar is fully showed before updating the percentage status for some reason (maybe the property background-image?), while the regular progressbar works fine.

What's wrong with the progress update function UpdateUIReverseProgressBar?

/**
 * Bootstrap Progress Bar
 * @author Loreto Parisi (loretoparisi@gmail.com)
 */
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 (loretoparisi@gmail.com)
 */
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>

解决方案

I have added an initial width to the element, see comment in code

/**
 * Bootstrap Progress Bar
 * @author Loreto Parisi (loretoparisi@gmail.com)
 */
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 (loretoparisi@gmail.com)
 */
var UpdateUIReverseProgressBar = function(containerId, progress) {
  if (!$('#revprogressdiv').length) {
    /* added width 0px in the following */
    var progress = '<div id="revprogressdiv" class="reverse-progress-container"  style="width: 0px;"><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>

这篇关于类似 Github 的 Bootstrap 反向动画进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆