Spinner

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

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

<main data-ts="Main" ts.busy="Busy message!">
	<h1>Main content</h1>
</main>

Let's try that with jQuery.

var main = $('main').first();
main.attr('data-ts.busy', 'Crunching data');
setTimeout(function() {
	main.attr('data-ts.busy', '');
}, 1500);

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

var main = $('main').first();
main.attr('data-ts.blocking', "Crunching and blocking");
setTimeout(function() {
	main.attr('data-ts.blocking', "");
}, 1500);

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="Chrunching data">
	<div data-ts="Panel">
		<p>Aside content.</p>
	</div>
</aside>

It will look like this.

var aside = $("#myaside");
aside.attr('data-ts.open', true);
aside.attr('data-ts.busy', 'Crunching data');
setTimeout(function() {
	aside.attr('data-ts.busy', '');
	setTimeout(function() {
		aside.attr('data-ts.open', false);
	}, 250)
}, 1500);

Button

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

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

Table

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

```
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() {
		$('#mytable').attr('data-ts.busy', '');
	}, 1500);
});
```