制作加载微调器

Question

我需要你的帮助，朋友们，为ajax请求创建一个加载微调器。它看起来像这样：working sample video

这是微调器的HTML

这是这个微调器的css：

$(document).ready(function() {
	$loading_indicator = $(document).find( '.loading-indicator' );
	$loading_indicator.addClass( 'active' );
	$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>

请帮助我让它工作， 因为我希望它像视频一样闪烁 而ajax请求正在处理

Answer 1

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>