1. html

                  

                  <div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="counter">  
                <div class="counter-icon"><i class="fa fa-globe"></i></div>
                <h3>Web Designing</h3>
                <span class="counter-value">373</span>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="counter blue">
                <div class="counter-icon"><i class="fa fa-rocket"></i></div>
                <h3>Web Development</h3>
                <span class="counter-value">352</span>
            </div>
        </div>
    </div>
</div>



                

2. css

                :root{ --white: #fff; }
.demo{ background: #e7e7e7; }
.counter{
    color: var(--white);
    font-family: 'Roboto', sans-serif;
    text-align: center;
    width: 200px;
    height: 235px;
    margin: 0 auto;
    padding: 33px 25px 20px;
    position: relative;
    z-index: 1;
}
.counter:before,
.counter:after{
    content: '';
    background: linear-gradient(-45deg,#22a6b3 33%,#68c1c9 29%,#68c1c9 63%,#7ed6df 0%);
    height: 200px;
    width: 200px;
    border: 18px solid var(--white);
    border-radius: 50%;
    transform: translateX(-50%) rotate(0);
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    transition: all 0.3s ease 0s;
}
.counter:hover:before{
    transform: translateX(-50%) rotate(360deg);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.counter:after{
    background: #22a6b3;
    
    bottom: 0;
    z-index: -2;
}
.counter .counter-icon{ font-size: 30px; }
.counter .counter-value{
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 3px;
    display: block;
}
.counter h3{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}
.counter.magenta:before{
    background: linear-gradient(-45deg,#c641c0 33%,#db4ed4 29%,#db4ed4 63%,#dd7ed9 0%);
}
.counter.magenta:after{ background: #c641c0; }
.counter.green:before{
    background: linear-gradient(-45deg,#6eaa40 33%,#8abc62 29%,#8abc62 63%,#acd18e 0%);
}
.counter.green:after{ background: #6eaa40; }
.counter.orange:before{
    background: linear-gradient(-45deg,#e8742c 33%,#ef8b51 29%,#ef8b51 63%,#efac86 0%);
}
.counter.orange:after{ background: #e8742c; }
@media  screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}

3. script

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
$(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));
            }
        });
    });
});
</script>