Slim SVG Clock In Vanilla JavaScript – pkclock.js

Category: Date & Time , Javascript | October 23, 2018
Views Total:1,081 views
Official Page:Go to website
Last Update:October 23, 2018


Slim SVG Clock In Vanilla JavaScript – pkclock.js


pkclock.js is a JavaScript library for generating a slim animated SVG analog or text clock to display the current local time.

How to use it:

Import the necessary JavaScript and CSS files into the document.

<link rel="stylesheet" href="style.css">
<script src="lib/pkclock.js"></script>

Generate an analog clock on the page.

<div class="demo"></div>
var pkClock = {
    id: 1,
    className: 'demo',
    // Clock display
    displayHouresMinutes: false,
    displayHouresMinutesSeconds: true,
    // Graphical settings
    size: 200

Generate a text clock on the page.

var pkTxtClock = {
    id: 2,
    className: 'demo',
    //Text time
    TextTime: true,
    region: 'Athens',
    displayTextTime: "hh-mm-ss-date-region" 

You Might Be Interested In:

Leave a Reply