<table> <tr> <th></th> <th>Predefined styles</th> </tr> <tr> <tr> <td>"success"</td> <td> <d-progress-bar class="d-progress-bar-success" message="d-progress-bar-success"></d-progress-bar> <d-progress-bar class="d-progress-bar-success" value=30 max=100></d-progress-bar> </td> </tr> <tr> <td>"info"</td> <td> <d-progress-bar class="d-progress-bar-info" message="d-progress-bar-info"></d-progress-bar> <d-progress-bar class="d-progress-bar-info" value=40 max=100></d-progress-bar> </td> </tr> <tr> <td>"warning"</td> <td> <d-progress-bar class="d-progress-bar-warning" message="d-progress-bar-warning"></d-progress-bar> <d-progress-bar class="d-progress-bar-warning" value=50 max=100></d-progress-bar> </td> </tr> <tr> <td>"danger"</td> <td> <d-progress-bar class="d-progress-bar-danger" message="d-progress-bar-danger"></d-progress-bar> <d-progress-bar class="d-progress-bar-danger" value=60 max=100></d-progress-bar> </td> </tr> </table>
.d-progress-bar { width: 200px; display: block; } table td { text-align: right; vertical-align: top; } table th { text-align: left; }
require.config({ baseUrl: "http://ibm-js.github.io/libraries/master", }); require(["deliteful-build/layer"], function () { require([ "deliteful/ProgressBar" ], function (){ document.body.style.visibility = "visible"; }); });