<?php
function wp_pagination() {
global $wp_query;
$big = 99999999;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
wp_reset_query();
}
?>

div#pagination {
width:100%;
height:auto;
text-align:center;
margin:0 auto;
padding:2% 0;
}
div#pagination > div {
width:100%;
height:auto;
margin:0 auto;
padding:0;
}
div#pagination > div > ul {
width:96%;
height:auto;
margin:0 auto;
padding:2%;
}
div#pagination > div > ul > li {
width: 10%;
height: auto;
list-style: none;
margin: 0 0 0 2%;
padding:0;
float: left;
}
div#pagination > div > ul > li:first-child {
display: none;
}
div#pagination > div > ul > li > a {
width: 100%;
height: auto;
color: #000;
background: #fcfcfc;
border:1px solid #2f2e2e;
margin:0 auto;
padding:20%;
}
div#pagination > div > ul > li > a:hover {
width: 100%;
height: auto;
color: #fff;
background:#2f2e2e !important;
border:1px solid #fcfcfc;
margin:0 auto;
padding:20%;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
-ms-transition: 0.8s;
transition: 0.8s;
}

<div id="pagination"><?php wp_pagination(); ?></div>