How to support Processing

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

• Support for Circular UI