<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%;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);
});
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.