jQuery：类似于 NProgess 的加载效果

Question

这是链接：http://ricostacruz.com/nprogress/

我已经生成了进度条，它错过了加载循环。

这是我找到的代码：

#progress-bar .peg {
display: block;
position: absolute;
 right: 0px;
 width: 100px;
 height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
                         -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);

特别是，你如何添加它？ 因为我正在做类似的事情：

    var $progressBarContainer = $('<div/>').attr('id', 'progress-bar-container');
    $progressBarContainer.append($('<div/>').attr('id', 'progress-bar'));
    $progressBarContainer.appendTo($('body'));

提前感谢您的帮助

Answer 1

他们在您提供的网站上使用它的方式是非常简单的正确方式。如果您在从网站上减去微调器代码方面需要帮助，我已经整理了一个 simple JSFiddle example for you。您应该能够复制粘贴 CSS 代码，并且只需更改 spinner-div 的内容。

启用旋转的代码是

-webkit-animation: spinner 400ms linear infinite;
-moz-animation:    spinner 400ms linear infinite;
-ms-animation:     spinner 400ms linear infinite;
-o-animation:      spinner 400ms linear infinite;
animation:         spinner 400ms linear infinite;

然后是每个浏览器的关键帧。