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.
346 lines
11 KiB
346 lines
11 KiB
---
|
|
layout : 'default'
|
|
css : 'progress'
|
|
|
|
element : 'progress'
|
|
elementType : 'module'
|
|
|
|
title : 'Progress'
|
|
description : 'A progress bar shows the progression of a task'
|
|
type : 'UI Module'
|
|
|
|
themes : ['Default', 'Classic', 'Basic', 'Striped']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/progress.less" />
|
|
<script src="/javascript/progress.js"></script>
|
|
|
|
<%- @partial('header', { tabs: { definition: 'Definition', usage: 'Usage' } }) %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="ui definition tab" data-tab="definition">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Standard</h4>
|
|
<p>A standard progress bar</p>
|
|
<div class="ui progress">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Uploading Files</div>
|
|
</div>
|
|
<div class="ignored">
|
|
<div class="ui icon buttons">
|
|
<div class="increment ui basic green button"><i class="plus icon"></i></div>
|
|
<div class="decrement ui basic red button"><i class="minus icon"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="indicating example">
|
|
<h4 class="ui header">Indicating</h4>
|
|
<p>An indicating progress bar visually indicates the current level of progress of a task</p>
|
|
<div class="ui indicating progress">
|
|
<div class="bar"></div>
|
|
<div class="label">Funding</div>
|
|
</div>
|
|
<div class="ignored">
|
|
<div class="ui icon buttons">
|
|
<div class="increment ui basic green button"><i class="plus icon"></i></div>
|
|
<div class="decrement ui basic red button"><i class="minus icon"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Content</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Bar</h4>
|
|
<p>A progress element can contain a bar to indicate the current level of progress</p>
|
|
<div class="ui progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Current Progress</h4>
|
|
<p>A progress bar can contain a reading of the current progress</p>
|
|
<div class="ui progress">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Label</h4>
|
|
<p>A progress element can contain a label</p>
|
|
<div class="ui progress">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Uploading Files</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 class="progress"></div>
|
|
</div>
|
|
<div class="label">Uploading Files</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Success</h4>
|
|
<p>A progress bar can show a success state</p>
|
|
<div class="ui progress success">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Everything worked, your file is all ready.</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 progress warning">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Your file didn't meet the minimum resolution requirements.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Error</h4>
|
|
<p>A progress bar can show an error state</p>
|
|
<div class="ui progress error">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">There was an error.</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"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A progress bar can have its colors inverted</p>
|
|
<div class="ui inverted segment">
|
|
<div class="ui inverted progress">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Uploading Files</div>
|
|
</div>
|
|
<div class="ui inverted progress success">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Success</div>
|
|
</div>
|
|
<div class="ui inverted progress warning">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Warning</div>
|
|
</div>
|
|
<div class="ui inverted progress error">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Error</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 black progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui blue progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui green progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui orange progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui pink progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui purple progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui red progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui teal progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="ui yellow progress">
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="usage">
|
|
|
|
<h2 class="ui header">Initializing a progress bar</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">With metadata</h4>
|
|
<p>A progress bar can be initialized with metadata</p>
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('#example1').progress();
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui teal progress" data-percent="74" id="example1">
|
|
<div class="bar"></div>
|
|
<div class="label">74% Funded</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4 class="ui header">With javascript</h4>
|
|
<p>A progress bar can be initialized with a javascript settings object</p>
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('#example2').progress({
|
|
percent: 22
|
|
});
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui teal progress" id="example2">
|
|
<div class="bar"></div>
|
|
<div class="label">22% Earned</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui header">Task Completion Percent</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Adding a total value</h4>
|
|
<p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
|
|
<p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('#example3')
|
|
.progress('increment')
|
|
;
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui teal progress" id="example3">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Adding Photos</div>
|
|
</div>
|
|
</div>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('#example3')
|
|
.progress({
|
|
total: 3
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Initializing with metadata and using custom labels</h4>
|
|
<p>A progress bar can keep track of the current value as a ratio of a total value. This is useful for tracking the progress of a series of events with a known quantity, for example "uploading 1 of 20" photos.</p>
|
|
<p>Each call to increment will increase the value by 1, or the value specified as the second parameter</p>
|
|
<p>In addition you can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state</p>
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('#example4')
|
|
.progress('increment')
|
|
;
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui indicating progress" data-value="1" data-total="20" id="example4">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Adding Photos</div>
|
|
</div>
|
|
</div>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('#example4')
|
|
.progress({
|
|
text: {
|
|
active : 'Adding {value} of {total} photos',
|
|
success : '{total} Photos Uploaded!'
|
|
}
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Alternate bar labels</h4>
|
|
<p>Progress bar labels can be set to either a percentage or ratio with percentage being the default state. If you need to translate a progress bar label simply pass in a new templated value as the accompanying text.</p>
|
|
<p>The following example shows how to localize for <b>Spanish</b>.</p>
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('#example5')
|
|
.progress('increment')
|
|
;
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui teal progress" data-value="15" data-total="20" id="example5">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="label">Carga de archivos</div>
|
|
</div>
|
|
</div>
|
|
<div class="evaluated code" data-type="javascript">
|
|
$('#example5')
|
|
.progress({
|
|
label: 'ratio',
|
|
text: {
|
|
ratio: '{value} de {total}'
|
|
}
|
|
})
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|