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

## Counter

Use the `tm-counter` class to show a counter of numbers that starts numerating from 0 to a specified number that you set via the `data-end` attribute. The id can be any text but it must be unique for each counter. The `data-duration` attribute defines how long the counter should run in milliseconds. Use any icon class from this page to add an icon to the counter.

## 12

### Projects done

## 65

### Cups of coffee

## 9300

### Lines of code

## 140

### Web pages

markup

    <div class="tm-counter uk-flex" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
      <div class="tm-counter-icon uk-flex-item-none">
        <i class="uk-icon-7s-plugin"></i>
      </div>
      <div class="tm-counter-content uk-flex-item-1">
        <h2 class="tm-counter-number" data-duration="4000" data-end="12" id="tm1">12</h2>
        <h3 class="tm-counter-title">Projects done</h3>
      </div>
    </div>

To add the counter to a number, use the `tm-counter` class. You can also add a percentage at the end of the number by using the `tm-counter-percent` class.

## 97

markup

    <div class="tm-counter uk-flex" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
    <div class="tm-counter-simple uk-flex-item-1">
      <h2 class="tm-counter-number tm-text-xlarge tm-counter-percent" id="tm6" data-end="97" data-duration="4000">97</h2>
    </div>
    </div>

## Circle charts

Circle charts are a nice way to illustrate data points. Use the `tm-chart-default` class to generate a circle chart.

Parameters | Description
--- | ---
`percent` | Set the end percent of the chart
`size` | Defines the size of the chart.
`border` | set the width of the animated part of the chart
`style` | set the color of the chart. The style options are `default`, `success`, `warning`, `danger`

markup

    <div class="tm-chart-default"><div data-uk-circle-chart="{maxPercent:85,size:200,border:15}"></div></div>

### Skills

### Design

### Photoshop

### Coding

### Show code

`<div class="uk-grid" data-uk-grid-margin=""> <div class="uk-width-medium-1-4"> <div class="tm-chart-default"> <div data-uk-circle-chart="{maxPercent:85,size:200,border:15}"></div> </div> <h3 class="uk-text-center">Skills</h3> </div> <div class="uk-width-medium-1-4"> <div class="tm-chart-success"> <div data-uk-circle-chart="{maxPercent:70,size:200,border:15}"></div> </div> <h3 class="uk-text-center">Design</h3> </div> <div class="uk-width-medium-1-4"> <div class="tm-chart-warning"> <div data-uk-circle-chart="{maxPercent:75,size:200,border:15}"></div> </div> <h3 class="uk-text-center">Photoshop</h3> </div> <div class="uk-width-medium-1-4"> <div class="tm-chart-danger"> <div data-uk-circle-chart="{maxPercent:90,size:200,border:15}"></div> </div> <h3 class="uk-text-center">Coding</h3> </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