# How to do Everything in Metro UI CSS
### Metro UI CSS with isLoading jQuery plugin
IsLoading jQuery plugin:
```
/* jQuery Plugin */
$.isLoading({
class: 'spin',
text: 'Loading',
position: 'overlay',
tpl: '%text%'
});
/* CSS */
/* Chrome, Safari, Opera */
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
/* Mozilla */
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
/* Opera */
@-moz-keyframes rotate {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
/* Spin animation */
i.spin, span.spin {
-webkit-animation: rotate 1s ease-in-out infinite;
animation: rotate 1s ease-in-out infinite;
-moz-animation: rotate 1s ease-in-out infinite;
}
/* jQuery isLoading styles */
span.isloading-wrapper.isloading-overlay {
position: absolute;
top: 50%;
left: 50%;
padding: 10px;
}
```
### Metro UI CSS Datepicker Change Event
```
$("#datepicker").datepicker({
selected: function(dateString, dateObject) {
alert('date-selected');
}
});
```