counter style : demo 29

Brand Building

8976

Web Development

7563

Web Designing

8856

Responsive Design

6523

HTML

                    

Brand Building

8976

Web Development

7563

CSS

                      .counter{padding: 30px 0;}
                      .counter .counter-content{
                          height: 140px;
                          width: 140px;
                          color: #303030;
                          text-align: center;
                          padding: 40px 10px;
                          margin: 0 auto;
                          background-color: #fff;
                          border-radius: 50%;
                          box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
                          position: relative;
                          transition: all 0.3s;
                      }
                      .counter .counter-content:hover{
                          background-color: rgba(0,0,0,0.05);
                      }
                      .counter .counter-content:before,
                      .counter .counter-content:after{
                          content: '';
                          height: 180px;
                          width: 180px;
                          border: 3px solid #B9C233;
                          border-left: none;
                          border-right: none;
                          border-radius: 50%;
                          position: absolute;
                          left: 50%;
                          top: 50%;
                          transform: translateX(-50%) translateY(-50%) rotate(10deg);
                          transition: all 0.3s;
                      }

                      .counter .counter-content:after{
                          border: 10px solid #B9C233;
                          border-left: 10px solid transparent;
                          border-right: 10px solid transparent;
                          transform: translateX(-50%) translateY(-50%) rotate(45deg);
                      }
                      .counter .counter-content:hover:before{
                          transform: translateX(-50%) translateY(-50%) rotate(190deg);
                          box-shadow: 0 0 20px -5px rgba(0,0,0,0.9);
                      }
                      .counter .counter-content:hover:after{transform: translateX(-50%) translateY(-50%) rotate(-225deg);}
                      .counter .counter-value{
                          font-size: 35px;
                          font-weight: 600;
                      }
                      .counter .title{
                          display: block;
                          font-size: 16px;
                          font-weight: 600;
                          margin: 0 0 5px 0;
                          text-transform: uppercase;
                      }
                      .counter.purple .counter-content:before{border-color: #67478A;}
                      .counter.purple .counter-content:after{
                          border: 10px solid #67478A;
                          border-left: 10px solid transparent;
                          border-right: 10px solid transparent;
                      }
                      .counter.yellow .counter-content:before{border-color: #E5BA21;}
                      .counter.yellow .counter-content:after{
                          border: 10px solid #E5BA21;
                          border-left: 10px solid transparent;
                          border-right: 10px solid transparent;
                      }
                      .counter.blue .counter-content:before{border-color: #5A9BA1;}
                      .counter.blue .counter-content:after{
                          border: 10px solid #5A9BA1;
                          border-left: 10px solid transparent;
                          border-right: 10px solid transparent;
                      }
                      @media screen and (max-width: 990px) {
                        .counter{margin-bottom: 30px;}
                      }
                    

JavaScript

(Counter depend on jQuery.)
                        

                        $(document).ready(function(){
                            $('.counter-value').each(function(){
                                $(this).prop('Counter',0).animate({
                                    Counter: $(this).text()
                                },{
                                    duration: 3500,
                                    easing: 'swing',
                                    step: function (now){
                                        $(this).text(Math.ceil(now));
                                    }
                                });
                            });
                        });
                    
License Terms