+254 728849575 csd@globewingltd.com globewingcsd

Progress

Welcome to Globewing

Growing your technology dreams together.

Defines different styles for progress bars.

Usage

The progress bar consists of a background bar and the progress bar itself, indicating the increase.

Class Description
.uk-progress This class is used on the parent container to create the background of the progress bar.
.uk-progress-bar This class needs to be added to the child element to create the actual progress bar.

Example

40%

Markup

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>

Size modifiers

Add the .uk-progress-mini or .uk-progress-small class to change the size of the bar.

Example

Markup

<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>

Color modifiers

To apply different colors to your progress bars, just add the .uk-progress-success, .uk-progress-warning or .uk-progress-danger class.

Example

Markup

<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>

Striped

To create a striped progress bar, use the .striped class.

Example

Markup

<div class="uk-progress uk-progress-striped">...</div>

You can even animate the striped bar. To do so, just add the .uk-active class.

Example

Markup

<div class="uk-progress uk-progress-striped uk-active">...</div>

Combinable

All modifiers of the Progress component can be combined with each other.

Example

Markup

<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>

Being online is one of the best methods of communicating with us, check our updates online or enquire about our services right here

Get in touch

Windsor House, University way Kenya


+254 728849575

csd@globewingltd.com

csdoutsourcing

Quick Feedback or enquiry