wangyifang
/
v2.tiantianxinye.365care
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '7586d6a73f'
${ noResults }
v2.tiantianxinye.365care/public/hyper/src/saas/ui-progress.html

464 lines
38 KiB
Raw Normal View History Unescape

init
5 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Progress | Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="light-style" />
<link href="assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="dark-style" />
</head>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}'>
<!-- Begin page -->
<div class="wrapper">
@@include('./partials/left-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
@@include('./partials/topbar.html')
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Base UI</a></li>
<li class="breadcrumb-item active">Progress</li>
</ol>
</div>
<h4 class="page-title">Progress</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="header-title">Examples</h4>
<p class="text-muted font-14">A progress bar can be used to show a user how far along he/she is in a process.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#default-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#default-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="default-progress-preview">
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="default-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
<div class="card">
<div class="card-body">
<h4 class="header-title">Height</h4>
<p class="text-muted font-14">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly.
Use <code>.progress-sm</code>,<code>.progress-md</code>,<code>.progress-lg</code>,<code>.progress-xl</code> classes.
</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#height-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#height-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="height-progress-preview">
<div class="progress mb-2" style="height: 1px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2 progress-sm">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2 progress-md">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg mb-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-success" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="height-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;!-- Inline height --&gt;
&lt;div class=&quot;progress&quot; style=&quot;height: 3px;&quot;&gt;
&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 25%; height: 20px;&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- .progress-sm --&gt;
&lt;div class=&quot;progress progress-sm&quot;&gt;
&lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- .progress-md --&gt;
&lt;div class=&quot;progress progress-md&quot;&gt;
&lt;div class=&quot;progress-bar bg-info&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- .progress-lg --&gt;
&lt;div class=&quot;progress progress-lg&quot;&gt;
&lt;div class=&quot;progress-bar bg-warning&quot; role=&quot;progressbar&quot; style=&quot;width: 75%&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- .progress-xl --&gt;
&lt;div class=&quot;progress progress-xl&quot;&gt;
&lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 38%&quot; aria-valuenow=&quot;38&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
<div class="card">
<div class="card-body">
<h4 class="header-title">Multiple bars</h4>
<p class="text-muted font-14">Include multiple progress bars in a progress component if you need.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#multiple-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#multiple-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="multiple-progress-preview">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="multiple-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 15%&quot; aria-valuenow=&quot;15&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 30%&quot; aria-valuenow=&quot;30&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;progress-bar bg-info&quot; role=&quot;progressbar&quot; style=&quot;width: 20%&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
<div class="card">
<div class="card-body">
<h4 class="header-title">Animated stripes</h4>
<p class="text-muted font-14">The striped gradient can also be animated. Add <code>.progress-bar-animated</code> to <code>.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#animated-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#animated-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="animated-progress-preview">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="animated-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped progress-bar-animated&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 75%&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
</div> <!-- end col -->
<div class="col-xl-6">
<div class="card">
<div class="card-body">
<h4 class="header-title">Labels</h4>
<p class="text-muted font-14">Add labels to your progress bars by placing text within the <code>.progress-bar</code>.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#labels-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#labels-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="labels-progress-preview">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="labels-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 25%;&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;25%&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
<div class="card">
<div class="card-body">
<h4 class="header-title">Backgrounds</h4>
<p class="text-muted font-14">Use background utility classes to change the appearance of individual progress bars.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#background-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#background-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="background-progress-preview">
<div class="progress mb-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar bg-dark" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="background-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;!-- Success --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Info --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-info&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Warning --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-warning&quot; role=&quot;progressbar&quot; style=&quot;width: 75%&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Danger --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-danger&quot; role=&quot;progressbar&quot; style=&quot;width: 100%&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Dark --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-dark&quot; role=&quot;progressbar&quot; style=&quot;width: 65%&quot; aria-valuenow=&quot;65&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Secondary --&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar bg-secondary&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
<div class="card">
<div class="card-body">
<h4 class="header-title">Striped</h4>
<p class="text-muted font-14">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color.</p>
<ul class="nav nav-tabs nav-bordered mb-3">
<li class="nav-item">
<a href="#striped-progress-preview" data-toggle="tab" aria-expanded="false" class="nav-link active">
Preview
</a>
</li>
<li class="nav-item">
<a href="#striped-progress-code" data-toggle="tab" aria-expanded="true" class="nav-link">
Code
</a>
</li>
</ul> <!-- end nav-->
<div class="tab-content">
<div class="tab-pane show active" id="striped-progress-preview">
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div> <!-- end preview-->
<div class="tab-pane" id="striped-progress-code">
<pre class="mb-0">
<span class="html escape">
&lt;div class=&quot;progress mb-2&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped&quot; role=&quot;progressbar&quot; style=&quot;width: 10%&quot; aria-valuenow=&quot;10&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress mb-2&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 25%&quot; aria-valuenow=&quot;25&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress mb-2&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped bg-info&quot; role=&quot;progressbar&quot; style=&quot;width: 50%&quot; aria-valuenow=&quot;50&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress mb-2&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped bg-warning&quot; role=&quot;progressbar&quot; style=&quot;width: 75%&quot; aria-valuenow=&quot;75&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar progress-bar-striped bg-danger&quot; role=&quot;progressbar&quot; style=&quot;width: 100%&quot; aria-valuenow=&quot;100&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</span>
</pre> <!-- end highlight-->
</div> <!-- end preview code-->
</div> <!-- end tab-content-->
</div> <!-- end card-body -->
</div> <!-- end card-->
</div> <!-- end col -->
</div>
<!-- end row -->
</div> <!-- container -->
</div> <!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- bundle -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>