Everything You Need to Know



Every platform has a different look for their activity indicators. ChocolateChip-UI offers a busy control that you can use in your app when you begin some task that may take an undeterminable time to complete so the user knows to wait. You can provide a color and a size for the activity indicator. On Android this is a spinning semi-circle, on iOS it is a spinning pronged star.

Simple Layout

A busy indicator is injected into another element, its conainer. So, you can show a busy indicator on a screen, a navigation bar, or even in an empty popup. It takes just two arguments: color and size. The defaults are 40 pixels by 40 pixels and #666666. You can also optionally provide positioning coordinates which would be used to position the control. Or you could run the method Center() on it as well. Here are some possible initializations for busy indicators:

$('#navBusy').Busy({color:'#007AFF', size: 28});

$('#busy1').Busy({'color':'rgba(200,0,0,0.75)', 'size': 50});

$('#busy2').Busy({'color': 'gold', 'size': 100});

And here's an example of creating an empty popup and inserting a busy indicator into it:

$.Popup({empty: true, width: 100});
$('#showModalBusyIndicator').on('tap', function(e) {
  if (!$('.popup').find('.busy')[0]) {
    $('.popup').Busy({'color':'orange', 'size': 90});
  setTimeout(function() {

Check out the following files in the examples folder: "activity-indicator.html", "activity-indicator-modal.html". Read the following instructions for getting the examples.

Busy Indicator Example

See the Pen Busy Indicator by Robert Biggs (@rbiggs) on CodePen.

Busy Indicator with Android Theme

See the Pen Busy Indicator for Android by Robert Biggs (@rbiggs) on CodePen.