Rails：無限スクロール、テキストの代わりにスピナーをロード

Question

すべて正常に動作しますが、テキストの代わりにスピナーローディングを表示します。これはPage.js.coffeeで私のコードです：

jQuery -> 
if $('.pagination').length 
    $(window).scroll -> 
     url = $('.pagination .next_page').attr('href') 
     if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50 
     $('.pagination').text("Fetching more...") 
     $.getScript(url) 
    $(window).scroll(). 

この行は、テキストを表示：

$('.pagination').text("Fetching more...")  

は君たちをありがとうございます。

Answer 1

おそらく、CSSがあなたのケースのためにうまくスーツを@keyframes、あなたは、例えば、ここでhttps://projects.lukehaas.me/css-loaders/

を可能な実装を確認することができますが、「

.loader, 
.loader:before, 
.loader:after { 
    border-radius: 50%; 
} 
.loader { 
    color: #ffffff; 
    font-size: 11px; 
    text-indent: -99999em; 
    margin: 55px auto; 
    position: relative; 
    width: 10em; 
    height: 10em; 
    box-shadow: inset 0 0 0 1em; 
    -webkit-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    transform: translateZ(0); 
} 
.loader:before, 
.loader:after { 
    position: absolute; 
    content: ''; 
} 
.loader:before { 
    width: 5.2em; 
    height: 10.2em; 
    background: #0dc5c1; 
    border-radius: 10.2em 0 0 10.2em; 
    top: -0.1em; 
    left: -0.1em; 
    -webkit-transform-origin: 5.2em 5.1em; 
    transform-origin: 5.2em 5.1em; 
    -webkit-animation: load2 2s infinite ease 1.5s; 
    animation: load2 2s infinite ease 1.5s; 
} 
.loader:after { 
    width: 5.2em; 
    height: 10.2em; 
    background: #0dc5c1; 
    border-radius: 0 10.2em 10.2em 0; 
    top: -0.1em; 
    left: 5.1em; 
    -webkit-transform-origin: 0px 5.1em; 
    transform-origin: 0px 5.1em; 
    -webkit-animation: load2 2s infinite ease; 
    animation: load2 2s infinite ease; 
} 
@-webkit-keyframes load2 { 
    0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@keyframes load2 { 
    0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 

を取ると、あなたのcoffescriptにだけクラスを追加および削除することができますloader "load div、またはそのようなクラスでdivを追加/削除します。

<div class="loader">Loading...</div>