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; 

, а затем ключевые кадры для каждого браузера.