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]です。