creating loadingindicator jquery ui plugin

In this post i will show you how easily  you can create your own plugin (or widget) with little help of jquery ui utils.

Because i'm a great jquery-ui fan - i will try to do things  (as much as i can) in a jquery-ui style.
You can download the whole  jqueryui project from the github (click on ZIP button) and play with it.

After extracting all the files you can see demos directory -where you can find demos of all existing widgets.
All the widgets code can be found inside  UI directory.
Lets create our own widget- jquery.ui.loadingindicator.js. This widget will make some animation indicating that some  process (like ajax request) being started:

(function($) {
     $.widget("ui.loadingindicator", {
  
    _create: function() {
           var el = this.element,
           loadingDiv = $('<div />',{class:"loading"}).text('loading...');
           

           el.append(loadingDiv);
           
         //locate in the center of parent
           var left = el.width() / 2 - loadingDiv.width() / 2;
           var top = el.height() / 2 - loadingDiv.height() / 2; 
           loadingDiv.css({ left: left + 'px', top: top + 'px' });     
   }
 })
})(jQuery);

Explanation:
I'm using here the jquery ui $.widget factory - method that give me the ability to create a widget from the template - the widget already have base methods like _create or _init, all i need is to override them and put in some logic.
All the widget makes is to create a simple div with caption "loading" and locate it in the center of parent element (the element that widget is applied on) .

We will create the special css for our widget:
ltes create   jquery.ui.loadingindicator.css
inside themes/base directory
Important!
for the future use you must add following code

 @import url("jquery.ui.loadingindicator.css");

at the and of jquery.ui.base.css
It will help you to create the demo

jquery.ui.loadingindicator.css :

.loading{
  background:#030303;
  width:100px;
  text-align:center;
  height:30px;
  position:absolute;
  border-radius: 4px;
        -webkit-border-radius: 4px ;
        -moz-border-radius: 4px ;
         padding-top:12px;
         color:#fff;
   
 /*for continous glowing animation*/
        -webkit-animation-name:             glow; 
        -webkit-animation-duration:         3s; 
        -webkit-animation-iteration-count:  infinite;
        -webkit-transition-timing-function: linear;
        -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9);
}
 
@-webkit-keyframes glow {
  0%{     -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 190, .75);   }
  50% {     -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0, 190, .75);   }   
  100% {     -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0, 190, .75);   }
}

This css styles the 'loading' message and adds the css3 glow animation to it.
 To see how the newly maiden things working we will create our demo inside demos directory
Lets create default.html
and put it inside demos/loadingindicator folder

 Now we have a nice "loading" indication message that resides in the middle of parent div.
In the future posts we will extend this base widget functionality
Thank you for reading so far...