create custom loader in jquery and css

<script type="text/javascript">
$(document).ready(function(){
   
     jQuery('#link').click(function(){
       
     var link_value =  jQuery(this).attr('value');
     //alert(link_value);
     pagination(link_value);
     
});
   
});

function pagination(link_value){
   
    jQuery("#ldr").show();
    jQuery.ajax({
    type: "GET",
    url: "http://example.com/",
    dataType : "html",
    data: {link_value: link_value},
    success: function(response){
    jQuery('.gallery').html(response);
    jQuery("#ldr").hide();
    },
});
     
   
}
</script>
<div id="ldr" style="z-index: 99999999;display: none; position: fixed; height: 100%; width: 100%; background: url("http://www.example.com/image/ajax_loader_blue_512.gif") no-repeat scroll center center rgba(0, 0, 0, 0.5);">
</div>
<label value="20" id="link">20

<div class="gallery"></div>