How to support Processing

Circular UI provides full size processing component.

The following explains how to support the full size processing component with former processing component.

Table of Contents

  1. Layout
  2. HTML code
  3. CSS code

Layout

in Rectangular UI in Circular UI

HTML code

<div class="ui-page ui-page-active" id="pageProcessing" data-enable-page-scroll="false">
	<header class="ui-header">
		<h2 class="ui-title">Processing</h2>
	</header>
	<div class="ui-content content-padding">
		<div class="ui-processing"></div>
		<div class="ui-processing-text">
			Description about progress
		</div>
	</div>
	<div class="ui-processing ui-processing-full-size"></div>
</div>

CSS code

.ui-processing-full-size {
	display: none;
}

@media all and (-tizen-geometric-shape: circle) {
	.ui-processing {
		display: none;
	}
	.ui-processing.ui-processing-full-size {
		display: block;
	}
}

Where to Go Next