60 lines
2.5 KiB
HTML
60 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="tui-bg-blue-black">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Progress Example</title>
|
|
<script src="../dist/tuicss.min.js"></script>
|
|
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body class="center" style="padding: 50px">
|
|
<div class="tui-window" style="text-align: left;">
|
|
<fieldset class="tui-fieldset">
|
|
<legend class="center">Progress</legend>
|
|
0% ............:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress" style="width: 0%"></span>
|
|
</div><br><br>
|
|
25% ...........:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress" style="width: 25%"></span>
|
|
</div><br><br>
|
|
50% ...........:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress" style="width: 50%"></span>
|
|
</div><br><br>
|
|
75% ...........:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress" style="width: 75%"></span>
|
|
</div><br><br>
|
|
100% ..........:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress" style="width: 100%"></span>
|
|
</div><br><br>
|
|
Texture bg ....:
|
|
<div class="tui-progress-bar inline-block valign-middle tui-bg-blue-black">
|
|
<span class="tui-progress" style="width: 50%"></span>
|
|
</div><br><br>
|
|
Indeterminate .:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-indeterminate"></span>
|
|
</div><br><br>
|
|
Labeled .......:
|
|
<div class="tui-progress-bar inline-block valign-middle">
|
|
<span class="tui-progress-label black-text">75%</span>
|
|
<span class="tui-progress" style="width: 75%"></span>
|
|
</div><br><br>
|
|
Custom ........:
|
|
<div class="tui-progress-bar inline-block valign-middle red-255">
|
|
<span class="tui-progress green-255" style="width: 50%"></span>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|