Moonstone Spinner Demo 2

Illustrates the implementation of a GPU-accelerated spinner, which uses transforms and animation keyframes to reduce JavaScript CPU thread usage.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>

JavaScript

enyo.kind({
	name: "moon.sample.SpinnerSample",
    kind: "enyo.Scroller",
	classes: "moon enyo-unselectable enyo-fit",
	components: [
		{kind: "moon.Divider", content: "Spinner"},
		{kind: "moon.Spinner"},
		{kind: "moon.Divider", content: "Spinner with Content"},
		{kind: "moon.Spinner", content: "Loading..."},
		{kind: "moon.Divider", content: "Spinner Centered in its Container"},
		{style: "text-align: center", components: [
			{kind: "moon.Spinner", content: "Loading..."}
		]},
		{kind: "moon.Divider", content: "Spinner with Looooong Content"},
		{kind: "moon.Spinner", content: "Loading so much content... This might take some arbitrary amount of time. Could be long, could be short. Who knows?"},
		{kind: "moon.Divider", content: "Spinner with Components Inside"},
		{kind: "moon.Spinner", components: [
			{kind: "moon.Icon", icon: "fullscreen"},
			{content: "Fullscreen mode is loading"},
			{kind: "moon.Icon", icon: "exitfullscreen"}
		]}
	]
});

enyo.ready(function () {
	new moon.sample.SpinnerSample().renderInto(document.body);
});