Theme Option
Navbar Color
Navbar Position
Fixed Static
Sidebar Navigation color
Dark Light
Sidebar Navigation Position
Fixed Static
Sidebar Navigation Style
Direction
LTR RTL
Reset Settings

Progress bar 


<div class="row">
  <!-- Frist box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default">
      <div class="card-header">
        <h2>890</h2>
        <p class="flex-basis-100 text-dark">New Users</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm rounded-0 mb-1">
          <div class="progress-bar bg-secondary" role="progressbar" style="width: 80%" aria-valuenow="80"
            aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-dark text-capitalize">User Reached</span>
          <span class="text-dark text-capitalize">80%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default">
      <div class="card-header">
        <h2>350</h2>
        <p class="flex-basis-100 text-dark">Order Placed</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm rounded-0 mb-1">
          <div class="progress-bar bg-success" role="progressbar" style="width: 70%" aria-valuenow="70"
            aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-dark text-capitalize">Order Placed</span>
          <span class="text-dark text-capitalize">70%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default">
      <div class="card-header">
        <h2>1360</h2>
        <p class="flex-basis-100 text-dark">Total Sales</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm rounded-0 mb-1">
          <div class="progress-bar bg-primary" role="progressbar" style="width: 60%" aria-valuenow="60"
            aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-dark text-capitalize">Sales of this year</span>
          <span class="text-dark text-capitalize">60%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default">
      <div class="card-header">
        <h2>$8930</h2>
        <p class="flex-basis-100 text-dark">Monthly Revenue</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm rounded-0 mb-1">
          <div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-dark text-capitalize">Revenew Reached</span>
          <span class="text-dark text-capitalize">80%</span>
        </div>
      </div>
    </div>
  </div>

</div>

890

New Users

User Reached 80%

350

Order Placed

Order Placed 70%

1360

Total Sales

Sales of this year 60%

$8930

Monthly Revenue

Revenew Reached 80%

Progress bar with Background 


<div class="row">

  <!-- Frist box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default bg-secondary">
      <div class="card-header">
        <h2 class="text-white">890</h2>
        <p class="flex-basis-100 text-white">New Users</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm progress-white rounded-0 mb-1">
          <div class="progress-bar bg-white" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-white text-capitalize">User Reached</span>
          <span class="text-white text-capitalize">80%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default bg-success">
      <div class="card-header">
        <h2 class="text-white">350</h2>
        <p class="flex-basis-100 text-white">Order Placed</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm progress-white rounded-0 mb-1">
          <div class="progress-bar bg-white" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-white text-capitalize">Order Placed</span>
          <span class="text-white text-capitalize">70%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default bg-primary">
      <div class="card-header">
        <h2 class="text-white">1360</h2>
        <p class="flex-basis-100 text-white">Total Sales</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm progress-white rounded-0 mb-1">
          <div class="progress-bar bg-white" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-white text-capitalize">Sales of this year</span>
          <span class="text-white text-capitalize">60%</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-lg-6 col-xl-3">
    <div class="card card-default bg-info">
      <div class="card-header">
        <h2 class="text-white">$8930</h2>
        <p class="flex-basis-100 text-white">Monthly Revenue</p>
      </div>
      <div class="card-body">
        <div class="progress progress-sm progress-white rounded-0 mb-1">
          <div class="progress-bar bg-white" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
            aria-valuemax="100"></div>
        </div>
        <div class="d-flex justify-content-between">
          <span class="text-white text-capitalize">Revenew Reached</span>
          <span class="text-white text-capitalize">80%</span>
        </div>
      </div>
    </div>
  </div>
</div>

890

New Users

User Reached 80%

350

Order Placed

Order Placed 70%

1360

Total Sales

Sales of this year 60%

$8930

Monthly Revenue

Revenew Reached 80%

Status


<div class="row">
<!-- Frist box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5">
        <div class="icon-md bg-secondary rounded-circle mr-3">
          <i class="mdi mdi-account-plus-outline"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block">890</span>
          <p>New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5">
        <div class="icon-md bg-success rounded-circle mr-3">
          <i class="mdi mdi-table-edit"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block">350</span>
          <p>Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5">
        <div class="icon-md bg-primary rounded-circle mr-3">
          <i class="mdi mdi-content-save-edit-outline"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block">1360</span>
          <p>Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5">
        <div class="icon-md bg-info rounded-circle mr-3">
          <i class="mdi mdi-bell"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block">$8930</span>
          <p>Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Status with Background


<div class="row">
  <!-- Frist box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-secondary">
      <div class="d-flex p-5">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-account-plus-outline text-secondary"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block text-white">890</span>
          <p class="text-white">New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-success">
      <div class="d-flex p-5">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-table-edit text-success"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block text-white">350</span>
          <p class="text-white">Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-primary">
      <div class="d-flex p-5">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-content-save-edit-outline text-primary"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block text-white">1360</span>
          <p class="text-white">Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-info">
      <div class="d-flex p-5">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-bell text-info"></i>
        </div>
        <div class="text-left">
          <span class="h2 d-block text-white">$8930</span>
          <p class="text-white">Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Status Style 2 


<div class="row">
<!-- Frist box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-secondary rounded-circle mr-3">
          <i class="mdi mdi-account-plus-outline"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block">890</span>
          <p>New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-success rounded-circle mr-3">
          <i class="mdi mdi-table-edit"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block">350</span>
          <p>Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-primary rounded-circle mr-3">
          <i class="mdi mdi-content-save-edit-outline"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block">1360</span>
          <p>Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-info rounded-circle mr-3">
          <i class="mdi mdi-bell"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block">$8930</span>
          <p>Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Status Style 2 with Background


<div class="row">
  <!-- Frist box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-secondary">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-account-plus-outline text-secondary"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block text-white">890</span>
          <p class="text-white">New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-success">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-table-edit text-success"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block text-white">350</span>
          <p class="text-white">Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-primary">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-content-save-edit-outline text-primary"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block text-white">1360</span>
          <p class="text-white">Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-info">
      <div class="d-flex p-5 justify-content-between">
        <div class="icon-md bg-white rounded-circle mr-3">
          <i class="mdi mdi-bell text-info"></i>
        </div>
        <div class="text-right">
          <span class="h2 d-block text-white">$8930</span>
          <p class="text-white">Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Status Style 3


<div class="row">

  <!-- First box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-secondary rounded-circle mb-2">
          <i class="mdi mdi-account-plus-outline"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block">890</span>
          <p>New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-success rounded-circle mb-2">
          <i class="mdi mdi-table-edit"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block">350</span>
          <p>Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-primary rounded-circle mb-2">
          <i class="mdi mdi-content-save-edit-outline"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block">1360</span>
          <p>Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth box -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-info rounded-circle mb-2">
          <i class="mdi mdi-bell"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block">$8930</span>
          <p>Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Status Style 3 with Background


<div class="row">

  <!-- First Inbox -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-secondary">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-white rounded-circle mb-2">
          <i class="mdi mdi-account-plus-outline text-secondary"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block text-white">890</span>
          <p class="text-white">New Users</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Second Inbox -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-success">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-white rounded-circle mb-2">
          <i class="mdi mdi-table-edit text-success"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block text-white">350</span>
          <p class="text-white">Order Placed</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Third Inbox -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-primary">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-white rounded-circle mb-2">
          <i class="mdi mdi-content-save-edit-outline text-primary"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block text-white">1360</span>
          <p class="text-white">Total Sales</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Fourth Inbox -->
  <div class="col-xl-3 col-md-6">
    <div class="card card-default bg-info">
      <div class="d-flex p-5 align-items-center flex-column">
        <div class="icon-md bg-white rounded-circle mb-2">
          <i class="mdi mdi-bell text-info"></i>
        </div>
        <div class="text-center">
          <span class="h2 d-block text-white">$8930</span>
          <p class="text-white">Monthly Revenue</p>
        </div>
      </div>
    </div>
  </div>
</div>
890

New Users

350

Order Placed

1360

Total Sales

$8930

Monthly Revenue

Selena Wagner

Avata Image
Hello my name is anna.
Hello i am Riman.
I want to know about yourself
Avata Image
Avata Image
Its had resolving otherwise she contented therefore.

Notifications

  • The stars are twinkling.

    Extremity sweetness difficult behaviour he of. On disposal of as landlord horrible. Afraid at highly months do things on at.

  • This is a Japanese doll.

    Marianne or husbands if at stronger ye. Considered is as middletons uncommonly. Promotion perfectly ye consisted so.

  • Support Ticket

    Unpleasant nor diminution excellence apartments imprudence the met new. Draw part them he an to he roof only. Music leave say doors him.

  • New Order

    Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am.

To Do List

Add task
Finish Dashboard UI Kit update Finished
Create new prototype for the landing page Today
Add new Google Analytics code to all main files Yesterday
Update parallax scroll on team page Dec 15, 2018
Update parallax scroll on team page Dec 15, 2018
Create online customer list book Dec 15, 2018
Lorem ipsum dolor sit amet, consectetur. Dec 15, 2018
Update parallax scroll on team page Dec 15, 2018
Update parallax scroll on team page Dec 15, 2018

Sales by Product

Add Stock

Page Views

Page Page Views Avg Time
/analytics.html 521 2m:14s
/email-inbox.html 356 2m:23s
/email-compose.html 254 2m:2s
/charts-chartjs.html 126 1m:15s
/profile.html 50 1m:7s
/general-widgets.html 50 2m:35s
/card.html 590 5m:55s
/email-inbox.html 29 8m:5s
Audience Overview

Contacts

Add New
User Image
Selena Wagner Designer
User Image
Walter Reuter Developer
User Image
Larissa Gebhardt Cyber Punk
User Image
Albrecht Straub Photographer
User Image
Leopold Ebert Fashion Designer
User Image
Selena Wagner Photographer