John Smith

### Recent Activity

- New sale ($15)
  Admin Template
  3 min ago
- You edited the file
  Documentation.doc
  15 min ago
- Project deleted
  Line Icon Set
  4 hours ago

### Online Friends

- Betty Kelley
  Copywriter
- Adam McCoy
  Web Developer
- Amber Harvey
  Web Designer
- Barbara Scott
  Photographer
- David Fuller
  Graphic Designer

### Quick Settings

Online Status

Show your status to all

Auto Updates

Keep up to date

Application Alerts

Email Notifications
SMS Notifications

API

Enable access
Sales
22.030
Balance
$4.589,00
Today
$996

- New sale! + $249
  3 min ago
- New sale! + $129
  50 min ago
- New sale! + $119
  2 hours ago
- New sale! + $499
  3 hours ago

Yesterday
$765

- New sale! + $249
  26 hours ago
- Product Purchase - $50
  28 hours ago
- New sale! + $119
  29 hours ago
- Paypal Withdrawal - $300
  37 hours ago
- New sale! + $129
  39 hours ago
- New sale! + $119
  45 hours ago
- New sale! + $499
  46 hours ago

Load More..

# Loaders

## Show any page or custom activity.

### Header Loader

You can use the layout API to start the header loader and stop it on demand. It is better to be used when the header is also set to fixed, so it is always visible.

Live | JS | Button Attributes
--- | --- | ---
Starting the header loader is very easy and you can either do it on button click or from JS code | `One.layout('header_loader_on');` | `data-toggle="layout" data-action="header_loader_on"`
The same applies for stoping it as well, it is very straightforward to use it | `One.layout('header_loader_off');` | `data-toggle="layout" data-action="header_loader_off"`

### Page Loader

You can add the following markup after `#page-container` div and the loading screen will be enabled and auto hide once the page loads:

`<div id="page-loader" class="show"></div>`

You can preview the page loader by clicking the following button:

Mode | JS
--- | ---
Showing the page header | `One.loader('show')`
Hiding the page header | `One.loader('hide')`