How to modify drupal ajax progress throbber

Drupal appends an ajax progress throbber everytime an ajax button or link is clicked. By default, it is a small blue circle gif animation next to the link or button that is clicked.We can modify it to make it look more catchy and show some nice custom animations.

I usually prefer to create an overlay while the ajax requests are being executed so that users cannot navigate to other pages so this is how to create an overlay with default drupal ajax throbber using css

.ajax-progress {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    z-index: 10;
.ajax-progress .throbber {
    background: transparenturl(../../misc/throbber-active.gif) no-repeat 0px center; //default gif, can be replaced with custom one
    float: none; 
    height: 15px;
    margin: 0;
    width: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -7px;

Thanks for reading!