$loadingPage

by mtambulut

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="secBegenAl">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<div id="preload" class="preload">
  <div class="content">
    <svg xmlns="http://www.w3.org/2000/svg" width="116" height="116" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><style>.a{fill:#2694d5;}</style><rect width="100" height="100" class="bk" fill="none"/><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(0 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(25.714285714285715 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0.14285714285714285s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(51.42857142857143 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0.2857142857142857s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(77.14285714285714 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0.42857142857142855s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(102.85714285714286 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0.5714285714285714s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5" transform="rotate(128.57142857142858 50 50)" class="a"><animate attributeName="opacity" from="1" to="0" dur="2s" begin="0.7142857142857143s" repeatCount="indefinite"/></rect><rect x="46.5" y="10" width="7" height="20" rx="5" ry="5"...

CSS

.preload{width:100%;height:84%;margin-top:50px;position:fixed;top:0;left:0;z-index:9999;display:table;}
.preload .content{display:table-cell;vertical-align:middle;text-align:center}

JavaScript

$(document).ready(function () {
            var SelectOsg = $("#secBegenAl");
            $('.preload').hide();
            SelectOsg.change(function () {
                $(document).ajaxStart( function() {
                    $('.preload').show();  // show loading div
                }).ajaxStop ( function(){
                    $('.preload').hide(); // hide loading div
                });
                
                
            });
       });