[Toolkit – Titon]Progressのサンプル

by

ToolKit[Titon]を利用した
Progressのサンプルプログラムです。

ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌

デモサイト：Progress – Titon Toolkit Demo Site

HTML head部

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

	<link rel="stylesheet" type="text/css" href="css/toolkit.css" />
	<link rel="stylesheet" type="text/css" href="css/ui.css" />
</head>

HTML body部（サンプル①）

<div class="progress">
	<div class="progress-bar" style="width: 45%">
		45%
	</div>
</div>

HTML body部（サンプル②）

<div class="progress small">
	<div class="progress-bar" style="width: 30%">
		Small
	</div>
</div>
<div class="progress">
	<div class="progress-bar" style="width: 60%">
		Default
	</div>
</div>
<div class="progress large">
	<div class="progress-bar" style="width: 90%">
		Large
	</div>
</div>

HTML body部（サンプル③）

<div class="progress pill">
	<div class="progress-bar" style="width: 50%">
		Pill Progress
	</div>
</div>

HTML body部（サンプル④）

<div class="progress">
	<div class="progress-bar is-info"    style="width: 20%">
		Info
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-success" style="width: 40%">
		Success
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-warning" style="width: 60%">
		Warning
	</div>
</div>
<div class="progress">
	<div class="progress-bar is-error"   style="width: 80%">
		Error
	</div>
</div>

HTML body部（サンプル⑤）

<div class="progress">
	<div class="progress-bar is-info"    style="width: 25%">Info</div>
	<div class="progress-bar is-success" style="width: 25%">Success</div>
	<div class="progress-bar is-warning" style="width: 25%">Warning</div>
	<div class="progress-bar is-error"   style="width: 25%">Error</div>
</div>

解説

Progressのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。

※ToolKit[Titon]のライセンスは[BSD]です。