制作加载微调器

我需要你的帮助，朋友，为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

制作加载微调器

回答

相关问题