製作加載微調器

我需要你的幫助，朋友，爲ajax請求創建加載微調器。它看起來像這樣：working sample video 製作加載微調器

下面是微調

這是該微調的CSS的HTML：

$(document).ready(function() { 
 
\t $loading_indicator = $(document).find('.loading-indicator'); 
 
\t $loading_indicator.addClass('active'); 
 
\t $loading_indicator.removeClass('active'); 
 
});

.loading-indicator { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #ddd; 
 
    border-radius: 100%; 
 
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 
 
    animation: sk-scaleout 1.0s infinite ease-in-out; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: opacity 0.2s linear, visibility 2s ease; 
 
    position: absolute; 
 
    top: 0; 
 
    margin: 0 auto; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.loading-indicator.active { 
 
visibility: visible; 
 
opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="loading-indicator" style=""></div>

請幫我做它的工作，，因爲我希望它閃爍像在視頻而阿賈克斯請求正在處理

來源

2016-11-23 kilogram

在'Ajax請求的success'回調對'Form'提交和刪除類添加類。 – Manwal

鏈接將提供幫助：https://connoratherton.com/loaders –

html, 
 
      body { 
 
       background: #ed5565; 
 
       color: #fff; 
 
      } 
 
      
 
      .ball-scale > div { 
 
       background-color: #fff; 
 
       width: 15px; 
 
       height: 15px; 
 
       border-radius: 100%; 
 
       margin: 2px; 
 
       -webkit-animation-fill-mode: both; 
 
       animation-fill-mode: both; 
 
       display: inline-block; 
 
       height: 60px; 
 
       width: 60px; 
 
       -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 
 
       animation: ball-scale 1s 0s ease-in-out infinite; 
 
      } 
 
      @keyframes ball-scale { 
 
       0% { 
 
        -webkit-transform: scale(0); 
 
        transform: scale(0); } 
 
       100% { 
 
        -webkit-transform: scale(1); 
 
        transform: scale(1); 
 
        opacity: 0; } }

<div class="loader"> 
 
    <div class="ball-scale"> 
 
    <div></div> 
 
    </div> 
 
</div>

來源

2016-11-23 09:33:37

製作加載微調器

回答

相關問題