在 Youtube spfjs 中显示进度条

Question

使用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）上看到的那样，有什么好的方法或示例代码可以做到这一点吗？

Answer 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();
});

做好准备。

Answer 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;
}