Spinner

The Spinner can be used with App, Aside, Table, SideBar and Button.

You can assign the data-ts.busy to the App element to initialize a Spinner.

<div data-ts="App" data-ts.busy="string or boolean"></div>

The attribute value can be true or false or perhaps an optional loading messsage. The Spinner can also be controlled with an equivalent JavaScript API as seen below.

ts.ui.get('.ts-app', app => {
	app.busy('Chrunching data');
	setTimeout(() => {
		app.done();
	}, 1500);
});

If you want a blocking overlay, you can use the data-ts.blocking attribute.

ts.ui.get('.ts-app', app => {
	app.blocking('Chrunching data');
	setTimeout(() => {
		app.done();
	}, 1500);
});

You can use the function of spin(message) to change the message of the spinner

ts.ui.get('.ts-app', app => {
	app.blocking('Chrunching data');
	setTimeout(() => {
		app.spinnerMessage('The data is coming');
	}, 1000);
	setTimeout(() => {
		app.spinnerMessage('Good luck');
	}, 2000);
	setTimeout(() => {
		app.done();
	}, 3000);
});

Aside and SideBar

Assign the data-ts.busy attribute to an Aside or SideBar to initialize a Spinner.

<aside data-ts="Aside" data-ts.busy="Crunching data">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

You can also use the equivalent API.

ts.ui.get('#myaside', aside => {
	aside.busy('Loading');
	aside.open();
	setTimeout(() => {
		aside.done();
		setTimeout(() => {
			aside.close();
		}, 250);
	}, 1500);
});

Button

Assign the data-ts.busy attribute to a Button to initialize a Spinner.

<button data-ts="Button" class="ts-primary" data-ts.busy="true">
	<span>Primary</span>
</button>

Table

You can assign the data-ts.busy attribute to a Table to initialize a Spinner; or you can use the busy and done methods like this.

```
ts.ui.get('#mytable', table => {
	table.cols(['One', 'Two', 'Three']);
	table.rows([
		['A', 'D', 'G'],
		['B', 'E', 'H'],
		['C', 'F', 'I']
	]);
	$('#mytable').attr('data-ts.busy', 'Loading');
	setTimeout(function() {
		table.done();
	}, 1500);
});
```