Оформление статистики в виде круговой анимации

Поговорим сегодня о статистике, неважно чего, поговорим именно о реализации блока "Статистика". Как к примеру видите его Вы? Первое что приходит в голову так это столбцы с цифрами или к примеру графики, правда? Но просмотрев огромнейшее количество зарубежных лендингов было замечено, что статистика креативно реализована и анимирована в виде кругов. Там как обычно написаны цифры, но в качестве графики выбраны круги, которые заполняются до определенного момента (процента).

Вот я и решил написать урок как сделать на своем сайте/лендинге подобную вещь.

Как сделать это?

 

HTML

Код блока с анимированными кругами:

 

<div class="row content">
    <div class="circle-container">
        <h3>PSD</h3>
        <div class="circlestat" data-dimension="200" data-text="90%" data-width="30" data-fontsize="38" data-percent="90" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
    </div>
 
    <!-- Еще круги -->
 
</div>

 

Все круги находятся в одном общем классе "row". А каждый отдельный круг лежит еще в блоке с классом "circle-container".

Перейдем непосредственно к настройкам самого круга, так как их многовато: 

 

class — привязка фуекционала плагина к верстке.

data-dimension — диаметр круга.

data-text — текст внутри круга.

data-width — толщина движущегося обода круга.

data-fontsize — размер текста внутри круга.

data-percent — процент для заполнения круга.

data-fgcolor — цвет обода круга.

data-bgcolor — цвет фонового круга.

data-fill — цвет заливки круга.

 

CSS

Подключаем стили jquery.circliful.css:

<link rel="stylesheet" href="css/jquery.circliful.css">

 

А также дописываем стили, чтобы наши круги размещались по три штуки в ряд:

 

.content {
   width: 90%;
   max-width: 1140px;
   margin: 0 auto;
}
 
.content:after {
   content: "";
   display: table;
   clear: both;
}
 
#stats {
   display: block;
   width: 100%;
   padding: 15px 0;
   background: #f8f8f8;
   border-top: 4px solid #c3c3c3;
   border-bottom: 4px solid #c3c3c3;
}
 
#stats .row {
   display: block;
}
 
.circle-container {
   display: block;
   float: left;
   margin-bottom: 45px;
   width:33.333%;
}
 
.circle-container h3 {
   display: block;
   text-align: center;
   font-size: 2.25em;
   line-height: 1.4em;
   color: #363636;
   text-shadow: 1px 1px 0 #fff;
}
 
.circlestat {
   margin: 0 auto;
}

 

JS​

Необходимые библиотеки:

jQuery.min.js

jquery.circliful.min.js

Подключаем их перед закрывающим тегом </body>:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.circliful.min.js"></script>

 

После после подключения библиотек вставляем между тегами <script type="text/javascript"> </script> следующий код:

 

$(function(){
    $('.circlestat').circliful();
});

 

circlestat — это именно наш класс блока с кругом, который имеет то большое количество атрибутов, описанные выше.

Итог

За этот короткий промежуток времени Вы научились создавать такой потрясающий эффект круговой анимации. Я б использовал его для отображения статистики, но кто знает, какое применение данному инструменту найдете Вы)
Всем добра!)