Untitled

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="plugin.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <div class="main" >
    <div id="mydata" class="block-wrapper" data-options='{"start":"50","end":"150","step":"10"}'>
      <div class="block">
        <p><span class="lnr lnr-heart"></span></p>
        <p class="counter-wrapper"><span class="fb"></span></p>
        <p class="text-block">like</p>
      </div>
    </div>
  </div>

</body>


</html>




//var options = JSON.parse( $('#mydata').data('options'));
$('#counter-block').ready(function() {
  $('.fb').animationCounter({
    start: 20,
    end: 250,
    step: 25,
    delay: 1000,
    txt: " kh"

  });

});

/* Styles go here */

html, body{ font-family: 'Montserrat', sans-serif; background-color:#fafafa; color: #7A7A7A; }
.main {font-size:20px; text-align:center; }

.title-plugin{ font-family: 'Pacifico', cursive; font-size: 80px; color: #019F9A}

.block-wrapper{ margin-right: auto; margin-left: auto; width: 824px; }
  .block{ color:#019F9A; float: left; border: 3px solid #019F9A; padding-top: 40px; width: 180px; height: 160px; margin: 10px}
    .block p { margin: 0; }
      .block p i{ font-size: 40px; color: #019F9A; }
  .counter-wrapper{ font-weight:700; margin:5px 0px 5px 0px; font-size: 25px; }
  .text-block{ font-size: 17px; }


  /* icon */
  .lnr-wrapper{ margin-top: 20px }
  .lnr-heart, .lnr-code, .lnr-bicycle, .lnr-history { color: #019F9A; font-size: 45px; }

footer{ position: absolute; bottom:10px; text-align: center; font-size: 14px; }
footer a{ color:#7A7A7A; text-decoration: none; font-weight: bold }

/* ===========================================================
 * animationCounter.js v.1.0.0
 * ===========================================================
 * Copyright 2017 Micheline Pavadé
 * http://www.pixel-renaissance.com
 * https://github.com/mpavade/
 *
 * animationCounter.js is a plugin that animate a counter from one value to another value
 * or from a number to an infinite value
 *
 * License MIT
 *
 * ========================================================== */


(function($){

    $.fn.animationCounter = function(options) {
        return this.each(function() {

            var element = $(this);

            var defaults = {
                start: 0,
                end: null,
                step: 1,
                delay: 1000,
                txt: "kh"
            }

            var settings = $.extend(defaults, options);

            var nb_start = settings.start;
            var nb_end = settings.end;

            element.text(nb_start + settings.txt);

            var counter = function() {
                // Definition of conditions of arrest
                if (nb_end != null && nb_start >= nb_end) {
                    return;
                }
                // incrementation
                nb_start = nb_start + settings.step;
                // display
                element.text(nb_start + settings.txt);
            }

            // Timer
            // Launches every "settings.delay"
            setInterval(counter, settings.delay);


        });
    };

})(jQuery);