<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/SVG-Based-Circular-Timer-Plugin-For-jQuery-Circle-Timer/dist/circletimer.min.js"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="example">
      <div id="example-timer"></div>
     <div class="text">текст</div>
    </div>
#ct-circle-container{width:100%;height:100%}#ct-circle-container svg{height:100%;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);width:100%}#ct-circle-container svg circle{fill:none;stroke:#17a7684f;stroke-dashoffset:0;stroke-width:50%}

/* Make sure the div you use for this is a square! */
      #example-timer {
        height: 150px;
        margin: 20px auto;
        width: 150px;
      }

.text {
  font-size: 40px;
  position: absolute;
  left: 47%;
  top: 40px;
  z-index: -1;
/*    */
}
     /* Example code */
      $(document).on("ready", function() {
        $("#example-timer").circletimer({
          onComplete: function() {
            alert("Time is up!");
          },
          onUpdate: function(elapsed) {
            $("#time-elapsed").html(Math.round(elapsed));
          },
          timeout: 5000
        });

    $("#example-timer").circletimer("start");
    
        $("#start").on("click", function() {
          
        });

        $("#pause").on("click", function() {
          $("#example-timer").circletimer("pause");
        });

        $("#stop").on("click", function() {
          $("#example-timer").circletimer("stop");
        });

        $("#add").on("click", function() {
          $("#example-timer").circletimer("add", 1000);
        });
      })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.