Progress Bars

Description

Progress bar indicates the percentage completed of a task.

Check the Lexicon Progress Bars Pattern for a more in-depth look at the motivations and proper usage of this component.

States

Place an addon on either side of a progress component with the progress-group and progress-group-addon classes:

30%

70%

{call ClayProgressBar.render}
	{param spritemap: '/images/icons/icons.svg' /}
	{param value: 30 /}
{/call}

{call ClayProgressBar.render}
	{param spritemap: '/images/icons/icons.svg' /}
	{param status: 'warning' /}
	{param value: 70 /}
{/call}

{call ClayProgressBar.render}
	{param spritemap: '/images/icons/icons.svg' /}
	{param status: 'complete' /}
{/call}

<clay-progress-bar
	spritemap="/images/icons/icons.svg"
	value="30">
</clay-progress-bar>

<clay-progress-bar
	spritemap="/images/icons/icons.svg"
	status="warning"
	value="70">
</clay-progress-bar>

<clay-progress-bar
	spritemap="/images/icons/icons.svg"
	status="complete">
</clay-progress-bar>

<div class="progress-group">
	<div class="progress">
		<div aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 30%;"></div>
	</div>
	<div class="progress-group-addon">30%</div>
</div>

<div class="progress-group progress-warning">
	<div class="progress">
		<div aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 70%;"></div>
	</div>
	<div class="progress-group-addon">70%</div>
</div>

<div class="progress-group progress-success">
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 100%;"></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-check-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>

API

Property	Description	Type	Required	Default
data	Data to add to the element.	object	false	undefined
defaultEventHandler	Object that wires events with default listeners	object\|undefined	false	undefined
elementClasses	CSS classes to be applied to the element.	string\|undefined	false	undefined
id	Id to be applied to the element.	string\|undefined	false	undefined
spritemap	The path to the SVG spritemap file containing the icons.	string	true	undefined
status	Progress bar state. Completed state can be defined here but also is automatically set if value is equal to maxValue.	string	false	undefined
value	The progress value of the bar.	number	false	undefined