マイロードGIFアニメーションは、私は、ローディングGIFを持って

Question

が動作していない

私のdivのHTMLコード：DIVを表示

<div id="modalPDF" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <div id="carregando"> 
        <img alt="" src="imagens/refresh.gif"> 
         <h4>Aguarde, gerando Arquivo...</h4> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JavaScriptコード：

$('#modalPDF').modal('show'); 

OBS：Loading GIFを表示した後、私はJS処理がたくさんある再帰的メソッドを実行しています。

Answer 1

これはあなたのgifの問題に対する答えではなく、問題の代替ソリューションです。

gifの代わりにCSSローダーを使用すると、読み込み速度が向上し、ブラウザの利便性が向上します。

これを表示するにはscreenLoader_Global()を呼び出し、それを削除するにはremove_screenLoader_Global()を呼び出す必要があります。ここではjQueryを使用しましたが、純粋なjを使用して簡単に同じ関数を書くことができます。

jsを使用してCSSローダを表示したり非表示にしたりするのは簡単です。

// loader (after submit) 
 
$('input[type="button"]').on('click', function(e) { 
 
\t \t //display loader 
 
    screenLoader_Global(); 
 
\t \t //just for testing, remove loader 
 
    setTimeout(function() { 
 
     remove_screenLoader_Global(); 
 
    }, 3000); 
 
}); 
 

 

 
/*----------------------------------------------------- 
 
\t \t global screen loader add/remove 
 
\t ------------------------------------------------------*/ 
 
function screenLoader_Global() { 
 
    $('<div class="loader-mask"><div class="loader"></div></div>').appendTo('body'); 
 
} 
 

 
function remove_screenLoader_Global() { 
 
    $('.loader-mask').remove(); 
 
}

/*----------------------------------------------- 
 
\t css loader (slack style) 
 
-----------------------------------------------*/ 
 

 
.loader { 
 
    position: relative; 
 
    width: 5em; 
 
    height: 5em; 
 
    transform: rotate(165deg); 
 
} 
 

 
.loader:before, 
 
.loader:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 0.5em; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.loader:before { 
 
    animation: slackbefore 2s infinite; 
 
} 
 

 
.loader:after { 
 
    animation: slackafter 2s infinite; 
 
} 
 

 
@keyframes slackbefore { 
 
    0% { 
 
    width: 1em; 
 
    box-shadow: 2em -1em rgba(225, 20, 98, 0.75), -2em 1em rgba(111, 202, 220, 0.75); 
 
    } 
 
    35% { 
 
    width: 5em; 
 
    box-shadow: 0 -1em rgba(225, 20, 98, 0.75), 0 1em rgba(111, 202, 220, 0.75); 
 
    } 
 
    70% { 
 
    width: 1em; 
 
    box-shadow: -2em -1em rgba(225, 20, 98, 0.75), 2em 1em rgba(111, 202, 220, 0.75); 
 
    } 
 
    100% { 
 
    box-shadow: 2em -1em rgba(225, 20, 98, 0.75), -2em 1em rgba(111, 202, 220, 0.75); 
 
    } 
 
} 
 

 
@keyframes slackafter { 
 
    0% { 
 
    height: 1em; 
 
    box-shadow: 1em 2em rgba(61, 184, 143, 0.75), -1em -2em rgba(233, 169, 32, 0.75); 
 
    } 
 
    35% { 
 
    height: 5em; 
 
    box-shadow: 1em 0 rgba(61, 184, 143, 0.75), -1em 0 rgba(233, 169, 32, 0.75); 
 
    } 
 
    70% { 
 
    height: 1em; 
 
    box-shadow: 1em -2em rgba(61, 184, 143, 0.75), -1em 2em rgba(233, 169, 32, 0.75); 
 
    } 
 
    100% { 
 
    box-shadow: 1em 2em rgba(61, 184, 143, 0.75), -1em -2em rgba(233, 169, 32, 0.75); 
 
    } 
 
} 
 

 

 
/* position to center */ 
 

 
.loader { 
 
    position: absolute; 
 
    top: calc(50% - 2.5em); 
 
    left: calc(50% - 2.5em); 
 
} 
 

 

 
/** 
 
* disable background 
 
*/ 
 

 
.loader-mask { 
 
    position: fixed; 
 
    z-index: 9998; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, .5); 
 
    display: table; 
 
    transition: opacity .3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <form method="post"> 
 
    <tr> 
 
     <td colspan="5" align="right"> 
 
     <input type="button" class="submit btn btn-success farmlead-green fl-btn-submit" value="Submit" /> 
 
     </td> 
 
    </tr> 
 
    </form> 
 
</table>