jQuery: similar Loading effect to NProgess

Question

This is the link : http://ricostacruz.com/nprogress/

I already produced the bar progress, it miss the load circle.

This is the code I found for it :

#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);

And particulary, how you add it ? Because i'm doing something like that :

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

Thanks in advance for you help

Answer 1

The way they use it on the site you provide is very simply the correct way to do it. If you need help with subtracting the spinner-code from the website, I have put together a simple JSFiddle example for you. You should be able to copy-paste the CSS code, and just change the content of the spinner-div.

The code that enables the rotation is

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

and then the keyframes for each browser.