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.
130 lines
3.1 KiB
130 lines
3.1 KiB
---
|
|
layout : 'default'
|
|
css : 'progress'
|
|
title : 'Progress'
|
|
description : 'Progress bars show the percent of a task complete'
|
|
type : 'UI Element'
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Types</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Progress Bar</h4>
|
|
<p>A standard progress bar</p>
|
|
<div class="ui progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Active</h4>
|
|
<p>A progress bar can show activity</p>
|
|
<div class="ui active progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Successful</h4>
|
|
<p>A progress bar can show success</p>
|
|
<div class="ui successful progress">
|
|
<div class="bar" style="width:100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Warning</h4>
|
|
<p>A progress bar can show a warning state</p>
|
|
<div class="ui warning progress">
|
|
<div class="bar" style="width:100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Failed</h4>
|
|
<p>A progress bar can show failure</p>
|
|
<div class="ui failed progress">
|
|
<div class="bar" style="width:100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A progress bar can be disabled</p>
|
|
<div class="ui disabled progress">
|
|
<div class="bar" style="width:100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Attached</h4>
|
|
<p>A progress bar can show progress of an element</p>
|
|
<div class="ui top attached progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui attached segment">
|
|
<p>La la la la</p>
|
|
</div>
|
|
<div class="ui bottom attached progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Color</h4>
|
|
<p>Can have different colors:</p>
|
|
<div class="ui blue progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui black progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui green progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui red progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui blue progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui purple progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui teal progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Striped</h4>
|
|
<p>A progress bar can be striped</p>
|
|
<div class="ui striped progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui active striped progress">
|
|
<div class="bar" style="width: 30%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|