Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

## Progress Bar

Use the `uk-progress-bar` class to create a progress bar in your content. The progress bar width is defined by the `width` css style. The following classes can be used in the style parameter:

Class | Description
--- | ---
`uk-progress-mini` | Size modifier for a mini progress bar
`uk-progress-small` | Size modifier for a small progress bar
`uk-progress-primary` | Color modifier for a blue progress bar
`uk-progress-success` | Color modifier for a green progress bar
`uk-progress-warning` | Color modifier for an orange progress bar
`uk-progress-danger` | Color modifier for a red progress bar
`uk-progress-striped` | Add stripes to the progress bar
`uk-active` | Animate a striped progress bar

### Simple progress bar

markup

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

### Size modifiers

markup

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

    <div class="uk-progress uk-progress-small">
      <div class="uk-progress-bar" style="width: 50%"></div>
    </div>

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

### Colored progress bars

markup

    <div class="uk-progress uk-progress-primary">
      <div class="uk-progress-bar" style="width: 30%"></div>
    </div>

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

    <div class="uk-progress uk-progress-warning">
      <div class="uk-progress-bar" style="width: 50%"></div>
    </div>

    <div class="uk-progress uk-progress-danger">
      <div class="uk-progress-bar" style="width: 60%"></div>
    </div>

### Combined options

loading...
markup

    <div class="uk-progress uk-progress-success uk-progress-striped uk-active">
      <div class="uk-progress-bar" style="width: 45%">loading...</div>
    </div>

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes