CSS ローディング表示

Ajax通信中等、時間が掛かる事をユーザー通知する

※HTML
<div id=”overlay”>
　　<div class=”cv-spinner”>
　　　　<span class=”spinner”></span>
　　</div>
</div>

※JavaScript
<script>
　　$(“#overlay”).fadeIn(500);
　　
　　時間の掛かる処理
　　$(“#overlay”).fadeOut(500);
　　
</script>

※CSS
<style>
　　#overlay{
　　　　position: fixed;
　　　　top: 0;
　　　　left: 0;
　　　　z-index: 999;
　　　　width: 100%;
　　　　height:100%;
　　　　display: none;
　　　　background: rgba(0,0,0,0.6);
　　}
　　.cv-spinner {
　　　　height: 100%;
　　　　display: flex;
　　　　justify-content: center;
　　　　align-items: center;
　　}
　　.spinner {
　　　　width: 80px;
　　　　height: 80px;
　　　　border: 4px #ddd solid;
　　　　border-top: 4px #999 solid;
　　　　border-radius: 50%;
　　　　animation: sp-anime 0.8s infinite linear;
　　}
　　@keyframes sp-anime {
　　　　0% { transform: rotate(0deg); }
　　　　100% { transform: rotate(359deg); }
　　}
　　.is-hide{
　　　　display:none;
　　}
</style>