在 Youtube spfjs 中显示进度条

Posted 2023-03-16

【中文标题】在 Youtube spfjs 中显示进度条

【英文标题】：Show a progress bar in Youtube spfjs

【发布时间】：2015-05-21 11:19:26

【问题描述】：

使用the spf js framework from Google，我在页面转换中显示“加载消息”（类似于 gmail）：

<script src=" //ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>
    <script type="text/javascript">
    $(document).ready( function() 
        spf.init();
        $(document).on("click", ".spf-link", function(e)
            $('.loading_message').show();
        ); 
    );
    </script>

但我想要的是一个不错的进度条，就像我们在the documentation page（或 Youtube 或 Medium）上看到的那样，有什么好的方法或示例代码可以做到这一点吗？

【参考方案1】：

您可以使用这个库：https://github.com/rstacruz/nprogress。 比在您的代码中执行以下操作：

$(document).on("spfclick", function() 
  // Show progress bar
  NProgress.start();
);

$(document).on("spfrequest", function() 
  // Increment progress as request is made
  NProgress.inc();
);

$(document).on("spfprocess", function() 
  // Set progress bar width to 100%
  NProgress.done();
);

$(document).on("spfdone", function() 
  // Finish request and remove progress bar
  NProgress.remove();
);

做好准备。

【讨论】：

我已经尝试过 nprogress，很好，但是使用这种方法，条形永远不会达到 100% 宽度。

试试on spfprocess NProgress.set(1)`（在我的情况下它会达到 100% 宽度），如果你想让它停留一段时间，你可以 setTimeout()

【参考方案2】：

来自docs。

HTML

<div id="progress"><dt></dt><dd></dd></div>

JS

var progress = document.getElementById('progress');

var position = -1;
var start = -1;
var timer = -1;

  // Animation states: start time, duration, progress complete, and css class.
var animation = 
  // Most progress waiting for response; duration is 3x expected to
  // accommodate slow networks and will be short-circuited by next step.
  REQUEST: [0, 300, '95%', 'waiting'],
  // Finish during short processing time.
  PROCESS: [100, 25, '101%', 'waiting'],
  // Fade it out slowly.
  DONE: [125, 150, '101%', 'done']
;



document.addEventListener('spfrequest', handleRequest);
document.addEventListener('spfprocess', handleProcess);
document.addEventListener('spfdone', handleDone);


function setProgress(anim) 
  clearTimeout(timer);
  var elapsed = (new Date()).getTime() - start;
  var scheduled = anim[0];
  var duration = anim[1];
  var percentage = anim[2];
  var classes = anim[3];
  var wait = scheduled - elapsed;
  // Since navigation can often be faster than the animation,
  // wait for the last scheduled step of the progress bar to complete
  // before finishing.
  if (classes == 'done' && wait > 0) 
    timer = setTimeout(function() 
      setProgress(anim);
    , wait);
    return;
  
  progress.className = '';
  var ps = progress.style;
  ps.transitionDuration = ps.TransitionDuration = duration + 'ms';
  ps.width = percentage;
  if (classes == 'done') 
    // If done, set the class now to start the fade-out and wait until
    // the duration is over (i.e. the fade is complete) to reset the bar
    // to the beginning.
    progress.className = classes;
    timer = setTimeout(function() 
      ps.width = '0%';
    , duration);
   else 
    // If waiting, set the class after the duration is over (i.e. the
    // bar has finished moving) to set the class and start the pulse.
    timer = setTimeout(function() 
      progress.className = classes;
    , duration);
  





function handleRequest(event) 
  start = (new Date()).getTime();
  setProgress(animation.REQUEST);


function handleProcess(event) 
  setProgress(animation.PROCESS);
  //window.scroll(0,0);


function handleDone(event) 
  setProgress(animation.DONE);
  //handleScroll();


function clearProgress() 
  clearTimeout(timer);
  progress.className = '';
  var ps = progress.style;
  ps.transitionDuration = ps.TransitionDuration = '0ms';
  ps.width = '0%';

CSS

@-webkit-keyframes pulse 
   30%  opacity: 0.6; 
   60%  opacity: 0; 
  100%  opacity: 0.6; 

@keyframes pulse 
   30%  opacity: 0.6; 
   60%  opacity: 0; 
  100%  opacity: 0.6; 


#progress 
  position: fixed;
  z-index: 1000;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: alpha($purple, 0.6)
  border-radius: 1px;
  /* the following transition times are overridden by JS */
  -webkit-transition: width 150ms ease-out;
  transition: width 150ms ease-out;

#progress.done 
  opacity: 0;


#progress dd,
#progress dt 
  position: absolute;
  top: 0;
  height: 2px;
  box-shadow: #45C2FF 1px 0 6px 1px;
  border-radius: 100%;

#progress dd 
  opacity: 0.6;
  width: 20px;
  right: 0;
  clip: rect(-6px, 22px, 14px, 10px);

#progress dt 
  opacity: 0.6;
  width: 180px;
  right: -80px;
  clip: rect(-6px, 90px, 14px, -6px);


#progress.waiting dd,
#progress.waiting dt 
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite;

【讨论】：

, 应该包含在