counter style : demo 14

1150

Web Design

779

Web Development

1503

Brand Building

2120

Responsive Design

HTML

                        
1150

Web Design

779

Web Development

CSS

                        :root{
                            --pink: #f740c0;
                            --orange: #f38d19;
                            --blue: #19a3f3;
                            --green: #3ac969;
                        }
                        .counter{
                            padding: 50px 20px;
                            text-align: center;
                            margin-bottom: 70px;
                            color: #fff;
                            z-index: 1;
                            position: relative;
                        }
                        .counter:before{
                            content: "";
                            width: 100%;
                            height: 100%;
                            background: var(--pink);
                            position: absolute;
                            top: 0;
                            right: 0;
                            z-index: -1;
                            -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
                            clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
                        }
                        .counter .counter-value{
                            display: block;
                            font-size: 45px;
                            font-weight: 700;
                            margin: 0 0 10px;
                        }
                        .counter .title{
                            font-size: 18px;
                            font-weight: 600;
                            text-transform: uppercase;
                        }
                        .counter .counter-icon{
                            width: 100px;
                            height: 100px;
                            line-height: 100px;
                            border-radius: 50%;
                            background: #fff;
                            margin: 0 auto;
                            font-size: 50px;
                            color: var(--pink);
                            border-bottom: 2px solid var(--pink);
                            position: absolute;
                            bottom:-60px;
                            left: 0;
                            right: 0;
                        }
                        .counter.orange:before{ background: var(--orange); }
                        .counter.orange .counter-icon{
                            color: var(--orange);
                            border-bottom: 2px solid var(--orange);
                        }
                        .counter.blue:before{ background: var(--blue); }
                        .counter.blue .counter-icon{
                            color: var(--blue);
                            border-bottom: 2px solid var(--blue);
                        }
                        .counter.green:before{ background: var(--green); }
                        .counter.green .counter-icon{
                            color: var(--green);
                            border-bottom: 2px solid var(--green);
                        }
                        @media only screen and (max-width: 990px){
                            .counter{ margin-bottom: 80px; }
                        }
                    

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