Adding a loader image/text in Bootstrap X-editable

Question

How can I put a loader gif in X-editable while an update request is made?

This is my code:

$(document).ready(function() {
    $('#username').editable();
});

<a href="#" id="username">superuser</a>

$('#username').editable({
    type: 'text',
    pk: 1,
    url: '/post',
    title: 'Enter username'
});

Answer 1

X-editable comes with a loader gif by default.

Just make sure the loader gif is the following path:

/img/loading.gif

If you wish to provide a custom path to the loader.gif,

Modify the following lines in the editable-form.css file, line 42:

.editableform-loading {  
    background: url('../img/loading.gif') center center no-repeat;  
    ...