Show loading gif after submit button is clicked in codeigniter [duplicate] - codeigniter

Question

This question already has answers here:
Show loading gif after clicking form submit using jQuery
(4 answers)
Closed 3 years ago.
How can I show loading GIF in the submit button in Codeigniter?
<button class="btn btn-primary" type="submit" name="save">
<?php echo lang('save'); ?>
</button>
In my CSS file
#btn btn-primary{
position:fixed;
left:0px;
top:width:100%;
height:100%;
z-index:9999;
background:url(images/pageLoader.gif)50% 50% no-repeat rgb(249,249,249);
}
In my JS file:
$('document').ready(function(e){
$("#btn btn-primaryr").fadeout("slow")

Answer 1

try this: do not use image in css give in tag
<img src="<?php url().images/pageLoader.gif?>" id="image">
$('.btn btn-primary').submit(function() {
$('#image').css('visibility', 'visible');
});

Answer 2

You should use like that:
$("#signup-form").submit(function(event) {
event.preventDefault();
var form_data = new FormData($('#signup-form')[0]);
$.ajax({
url : baseURL + "api/signup",
type : "POST",
data : form_data,
dataType : "JSON",
cache: false,
contentType: false,
processData: false,
beforeSend:function(){
ajaxindicatorstart();
},
success: function(resp){
if(resp.resp == 1){
$('#signup-form')[0].reset();
alert(resp.Message);
}else{
alert(resp.Message);
}
ajaxindicatorstop();
},
error:function(error)
{
ajaxindicatorstop();
}
});
});
function ajaxindicatorstart() {
if (
jQuery("body")
.find("#resultLoading")
.attr("id") != "resultLoading"
) {
jQuery("body").append(
'<div id="resultLoading" style="display:none"><div><img src="' +
baseURL() +
'asset/img/ajax-loader.gif"><div>Loading...</div></div><div class="bg"></div></div>'
);
}
jQuery("#resultLoading").css({
width: "100%",
height: "100%",
position: "fixed",
"z-index": "10000000",
top: "0",
left: "0",
right: "0",
bottom: "0",
margin: "auto"
});
jQuery("#resultLoading .bg").css({
background: "#000000",
opacity: "0.7",
width: "100%",
height: "100%",
position: "absolute",
top: "0"
});
jQuery("#resultLoading>div:first").css({
width: "250px",
height: "75px",
"text-align": "center",
position: "fixed",
top: "0",
left: "0",
right: "0",
bottom: "0",
margin: "auto",
"font-size": "16px",
"z-index": "10",
color: "#ffffff"
});
jQuery("#resultLoading .bg").height("100%");
jQuery("#resultLoading").fadeIn(300);
jQuery("body").css("cursor", "wait");
}
function ajaxindicatorstop() {
jQuery("#resultLoading .bg").height("100%");
jQuery("#resultLoading").fadeOut(300);
jQuery("body").css("cursor", "default");
}
Loading Image URL:-
https://pqmsystems.biz/asset/img/ajax-loader.gif
Please try this way....