Mono - Responsive Admin & Dashboard Template

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

Hello my name is anna. 5 mins ago

Hello i am Riman. 4 mins ago

I want to know about yourself 3 mins ago

Its had resolving otherwise she contented therefore. 1 mins ago

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

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

Sales by Product

Add Stock

Product Name	Unit	Amount	%sold
Coach Swagger	134	$24541	35.28%
Toddler Shoes	119	$20225	27.05%
Hat Black Suits	101	$17,290	20.25%
Backpack Gents	59	$1150	12.50%
Speed 500 Ignite	25	$590	02.10%
Earphone & Headphone	23	$450	02%
Gucci Watch	32	$554	8%

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

Progress bar

890

350

1360

$8930

Progress bar with Background

890

350

1360

$8930

Status

Status with Background

Status Style 2

Status Style 2 with Background

Status Style 3

Status Style 3 with Background

Selena Wagner

Notifications

To Do List

Sales by Product

Page Views

Contacts