NiceSnippets.com
Dashboard Statistics Box With Process Bar
In this dashboard statistics cout box design we are also display process bar. in this count box you can display total product count,total slidr,total contact and other items. you can display with groth in progress bar. this box design you use at admin panel dashboard
We allows to free snippets of admin panel dashboard design , you can download full code of bootstrap admin template open source layout. Here in this post i will give you example of simple admin panel template snippet and you will get simple code of html, css and jquery. In bootstrap admin template open source snippet i give you three tab with html, css and js, you can easily get code of Dasboard Statistics Colored Circle layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="main-section">
<div class="section">
<div class="top-section">
<h1>Users</h1>
<span>Lorem ipsum id est laborum.</span>
</div>
<div class="border-section">
<div class="left-border"></div>
<div class="right-border"></div>
<div style="clear:both;"></div>
</div>
<div class="bottom-section">
<h2>60% increase</h2>
<span>Lorem ipsum id est laborum.</span>
</div>
</div>
<div class="second-section">
<div class="top-section">
<h1>Contact Us</h1>
<span>Lorem ipsum id est laborum.</span>
</div>
<div class="border-section">
<div class="left-border"></div>
<div class="right-border"></div>
<div style="clear:both;"></div>
</div>
<div class="bottom-section">
<h2>20% increase</h2>
<span>Lorem ipsum id est laborum.</span>
</div>
</div>
<div class="third-section">
<div class="top-section">
<h1>Sliders</h1>
<span>Lorem ipsum id est laborum.</span>
</div>
<div class="border-section">
<div class="left-border"></div>
<div class="right-border"></div>
<div style="clear:both;"></div>
</div>
<div class="bottom-section">
<h2>50% increase</h2>
<span>Lorem ipsum id est laborum.</span>
</div>
</div>
<div class="forth-section">
<div class="top-section">
<h1>Products</h1>
<span>Lorem ipsum id est laborum.</span>
</div>
<div class="border-section">
<div class="left-border"></div>
<div class="right-border"></div>
<div style="clear:both;"></div>
</div>
<div class="bottom-section">
<h2>80% increase</h2>
<span>Lorem ipsum id est laborum.</span>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
body{
background-color:#d2d2d2;
margin: 0px;
}
h1,h2{
margin:0px;
}
.main-section{
width:80%;
margin:auto;
font-family: 'Raleway', sans-serif;
}
.section,.second-section,.third-section,.forth-section{
width:24%;
float:left;
overflow: hidden;
margin-right:1%;
border-radius:5px 5px 0px 0px;
}
.top-section,.bottom-section{
padding:20px;
color:#fff;
background-color:#F4837D;
}
.left-border{
background-color:#fff;
height:2px;
width: 60%;
float:left;
}
.right-border{
color:red !important;
height:2px;
background-color:#F48301;
float:left;
width:40%;
}
.bottom-section{
text-align: right;
background-color:#EB4960;
border-radius:0px 0px 5px 5px;
}
.second-section .top-section{
background-color:#F2C02B;
}
.second-section .bottom-section{
background-color: #F39D36;
}
.second-section .left-border{
width: 20%;
}
.second-section .right-border{
width:80%;
background-color:#F39D01;
}
.third-section .top-section{
background-color:#0191C8;
}
.third-section .bottom-section{
background-color:#005B9A;
}
.third-section .left-border{
width:50%;
}
.third-section .right-border{
width:50%;
background-color:#005B5E;
}
.forth-section .top-section{
background-color:#26A137;
}
.forth-section .bottom-section{
background-color:#12511A;
}
.forth-section .left-border{
width:80%;
}
.forth-section .right-border{
width:20%;
background-color:#12517C;
}
