Develop Reference

Why do my custom CSS styles get removed when trying to bring this JavaScript file, into my Vaadin application?

import {css, html, LitElement} from 'lit';
class AnalogClock extends LitElement {
static get properties() {
return {
time: {type: Date},
interval: {type: Object}
};
}
static get styles() {
return css`
.clock {
width: 30rem;
height: 30rem;
border: 7px solid #282828;
box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
inset 4px 4px 10px rgba(0,0,0,0.5),
inset -4px -4px 10px rgba(67,67,67,0.5),
4px 4px 10px rgba(0,0,0,0.3);
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #282828;
overflow: hidden;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #1df52f;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #bdbdcb;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #4d4b63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 6px;
background: #61afff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 3px;
z-index: 10;
width: 40%;
}
.hand.second-hand {
background: #ee791a;
width: 45%;
height: 2px;
}
`;
}
render() {
return html`
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
`;
}
setDate(time) {
const secondHand = this.shadowRoot.querySelector('.second-hand');
const minsHand = this.shadowRoot.querySelector('.min-hand');
const hourHand = this.shadowRoot.querySelector('.hour-hand');
const now = time;
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
constructor() {
super();
this.time = new Date();
this.updateComplete.then(() => {
this.setDate(this.time);
this.interval = setInterval(() => {
this.time = new Date(this.time.setSeconds(this.time.getSeconds() + 1));
this.setDate(this.time);
}, 1000);
}
);
}
}
window.customElements.define('analog-clock', AnalogClock);
My component class
The view where I bring the clock in
The result of bringing the clock into the application, which has removed all my previous styles
The clock is a JavaScript file which I have very little experience using, I am bringing the clock into my Vaadin application using the spring #JsModule annotation and it appears to be over riding all my current CSS styling. If anyone can shed some light on this it would be much appreciated.

Vaadin implementing an Analog Clock

I am trying to implement an Analog clock into my Vaadin 14 Spring Boot project.
I have found many Analog clocks online written in JavaScript/HTML/CSS and I have tried to import these files into Vaadin using the #HtmlImport, #JsModule #JavaScript and #Tag annotations.
I have been successful at getting the clock displayed but without any moving parts. I will attach the HTML file I have been using.
Here is the link to the source:
https://www.foolishdeveloper.com/2021/07/simple-analog-clock-html-css-javascript.html
What is the proper way of getting this clock implemented?
Any advice will be much appreciated.
import {html, PolymerElement} from '#polymer/polymer/polymer-element.js';
class AnalogClockContainer extends PolymerElement {
static get template() {
return html`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style>
.clock {
width: 30rem;
height: 30rem;
border: 7px solid #282828;
box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5),
inset 4px 4px 10px rgba(0, 0, 0, 0.5),
inset -4px -4px 10px rgba(67, 67, 67, 0.5),
4px 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #282828;
overflow: hidden;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking {
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #1df52f;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #bdbdcb;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #4d4b63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 6px;
background: #61afff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 3px;
z-index: 10;
width: 40%;
}
.hand.second-hand {
background: #ee791a;
width: 45%;
height: 2px;
}
</style>
</head>
<body>
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
</body>
</html>
`;
}
}
window.customElements.define('analog-clock-container', AnalogClockContainer);
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
This is my Java class that I am trying to bring the clock into

How to make a child div override its parent position in a grid?

I'm currently building my own graphic design portfolio, which is grid based (inspired by this concept https://codepen.io/jkantner/pen/KQPdXK (there is my codepen at the end of the post with my modified version)) and I'm struggling to get some features to work.
I have a series of div, one per project I want to showcase, which are referred by the class .stack:nth-child(n) individually and by the classes .card and .top as a whole. Those cards are contained in the .cards-div with display: grid property applied. A transform property is also applied to it to create the 3D-perspective effect.
I want to make a card, that, once active/focused, stands in front of everything and to show in details its particular project. I already succeeded in making it bigger than the others, getting it in another position and reversing the 3D-effect of its parent but I cannot figure out how to make all the cards go to the same place once focused, because they retain their position induced by the parent.
How should I proceed to set one position for all focus/active cards and overriding their position in their parent's grid ?
Here's my messy code although you probably should read it on CodePen as you'll probably see the mobile version here because of the size of the snippet thumbnail: https://codepen.io/Goo_m_Ba/pen/gdqGrP
window.addEventListener("scroll", scrollGrid);
window.addEventListener("wheel", noShakeScroll);
function scrollGrid() {
let transY = window.pageYOffset,
cards = document.querySelector(".cards");
cards.style.setProperty("--scroll", transY + "px");
}
scrollGrid();
/* Without this, the `items` div erratically shakes while scrolling with wheel or touchpad. The issue still persists in Safari though… */
function noShakeScroll(e) {
this.scrollBy(0, e.deltaY);
e.preventDefault();
}
var $stickyBlock = document.querySelector('.portfolio');
var origOffsetY = $stickyBlock.offsetTop - 15; // 15 is your top margin
function onScroll() {
window.scrollY >= origOffsetY ? $stickyBlock.classList.add('sticky') :
$stickyBlock.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 1vw;
--cardW: 20vw;
--cardH: 20vw;
--cardZInc: 0.5em;
--gap: 1.5em;
--ttxt: 0.5em;
}
a {
text-decoration: none;
color: white;
}
body {
background-image: repeating-linear-gradient(35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px), repeating-linear-gradient(-35deg, #eeeeee, #dddddd, transparent 2px, transparent 80px);
background-attachment: fixed;
font: 1em "Open Sans", sans-serif;
height: 100vh;
overflow-x: hidden;
position: sticky;
}
/* Grid */
.cards,
.stack {
transform-style: preserve-3d;
}
.portfolio {
text-align: center;
font: 1em "Rubik Mono One", sans-serif;
/* letter-spacing: 0.5em; */
font-size: 1.1em;
text-color: white;
grid-template: repeat(12, calc (var(--cardH)*2)) / var(--cardW);
z-index: 0;
outline: 50px solid white;
position: absolute;
background-color: white;
width: 100%;
height: 40em;
transform: translateZ(-10px);
top: calc(-1% - var(--gap)*2);
opacity: 1;
}
.stack .contents {
color: #faf;
position: relative;
}
.cards {
--scroll: 100px;
display: grid;
grid-template: repeat(12 var(--cardH)) / var(--cardW);
grid-gap: var(--gap);
padding-bottom: calc(var(--cardH) * 3);
position: absolute;
transform: translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg) rotateZ(45deg) translateY(calc(50% - var(--scroll)));
z-index: 1;
}
/* Card hover */
.stack:hover .top,
.stack:focus .top {
transition: all 0.5s;
transform: translateZ(calc(var(--cardZInc)*4))rotateX(-20deg);
transform-origin: center bottom;
z-index: 2
}
.stack:nth-child(2):active .top {
transform: translateX(calc(0px - calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:nth-child(3):active .top {
transform: translateX(calc(0px + calc(var(--gap) * 1) - calc(var(--cardW) * 0.5))) translateY(calc(0px + calc(var(--gap) * 4) + calc(var(--cardW) * 1))) translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:nth-child(4):focus .top {
transform: translateX(calc(0px + calc(var(--gap) * 0) - calc(var(--cardW) * 1.5))) translateY(calc(0px + calc(var(--gap) * 1) + calc(var(--cardW) * 1))) translateZ(16vw)rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
}
.stack:focus .top {
transform-origin: center bottom;
transform: translateZ(16vw) rotateX(-25.1deg) rotateY(27deg) rotateZ(-40deg);
height: 70vh;
width: 70vw;
/*translate(-20%, calc(-50% + var(--scroll))) rotateX(45deg)
rotateZ(45deg) translateY(calc(50% - var(--scroll)));*/
z-index: 15;
/*width:50vw ;
height:50vw;*/
}
.stack:hover .shadow,
.stack:focus .shadow {
filter: blur(5px);
-webkit-filter: blur(5px);
opacity: 0.2;
transform-origin: center bottom;
height: 80%;
transform: translatey(20%);
}
/* Other card styles */
.card {
/*background-image: url(https://cdn.weasyl.com/static/media/dd/c2/45/ddc2458130dd90cf4d5f5783f14f7835cf980110df9131354325a358a3d3d60d.png);*/
background-color: black;
background-size: 200% 200%;
box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2) inset;
color: #000;
padding: 0.75em;
position: absolute;
transition: all 0.3s;
width: 100%;
height: 100%;
outline: 5px solid green;
}
.top {
transform: translateZ(10px);
z-index: 15;
}
.shadow {
background: #000;
filter: blur(2px);
-webkit-filter: blur(2px);
opacity: 0.2;
}
/* Alter grid at breakpoints */
#media screen and (max-width: 550px) {
:root {
font-size: 5vw;
--cardW: 100vw;
--cardH: 100vw;
--cardZInc: 10.5em;
--ttxt: 0.5em;
}
.stack:hover .top,
.stack:focus .top {
transform: translateZ(calc(var(--cardZInc)*0))rotateX(0deg);
transform-origin: center bottom;
}
.cards {
grid-template: repeat(24, var(--cardH)) / repeat(1, var(--cardW));
transform: translate(-0, calc(0 + var(--scroll))) rotateX(0deg) rotateZ(0deg) translateY(calc(0% - var(--scroll)));
left: 0%;
top: 25%;
}
.titre {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
bottom: 80vh;
left: 10px;
white-space: nowrap;
}
.portfolio {
font-size: 6vw;
letter-spacing: 0em;
opacity: 0;
width: 100vw;
top: -100px;
}
#dg {
bottom: 5vh
}
}
#media screen and (min-width: 551px) {
#nom {
white-space: nowrap;
width: 100%;
}
#dg {
margin-top: 10vh;
}
.cards {
grid-template: repeat(16, var(--cardH)) / repeat(2, var(--cardW));
top: 50%;
left: 60%;
}
:root {
font-size: 2vw;
--cardW: 40vw;
--cardH: 40vw;
--cardZInc: 0.5em;
--ttxt: 1em;
}
}
#media screen and (min-width: 1050px) {
#nom {
white-space: normal;
}
#dg {
font-size: calc(var(--ttxt) * 0.7);
margin-top: 13vw;
}
.cards {
grid-template: repeat(12, var(--cardH)) / repeat(3, var(--cardW));
top: 35%;
left: 60%
}
:root {
font-size: 2vw;
--cardW: 18vw;
--cardH: 18vw;
--cardZInc: 0.5em;
--ttxt: 1em;
}
}
<div class="cards">
<div class="portfolio">
<div class="contents">
<p>nice portfolio</p>
</div>
</div>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">1 NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>
<a class="stack" href="#">
<div class="card top">
<div class="contents">
<p id="projets">NOM DU PROJET </p>
</div>
</div>
<div class="card shadow"></div>
</a>

A html element is relative to it's first positioned parent. To cancel positioning on an element, you can set the rule
position: static;

Making a Clock in JavaScript using DIVs only

We have to build a clock in JavaScript using divs only, (document.createElement()). Somehow, I never get the positioning of the divs right. Currently, I'm already struggling to make the first DIV.
Sorry if I have mistakes in the calculation of the angles.
Are there any better ways to achieve this goal?
Now it looks a bit like this:
The red lines are representing the numbers of a clock (12 of them in total).
window.onload = function drawclock() {
var clock = this.document.getElementById("clock");
var width = clock.offsetHeight;
var radius = width / 2;
for (var i = 1; i < 12; i++) {
var element = document.createElement("DIV");
addClass(element, "h");
addClass(element, i);
var deg = 30 * i;
var x = Math.cos(deg * (180 / Math.PI)) * radius + radius;
var y = Math.sin((90 - deg) * (180 / Math.PI)) * radius + radius;
console.log(x + " " + y);
element.style.position = "absolute";
element.style.left = x + "px";
element.style.top = y + "px";
element.style.transform = "rotate(" + deg + "deg)";
clock.appendChild(element);
}
}
function addClass(element, name) {
var arr;
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #000;
}
#clock {
height: 500px;
width: 500px;
background-color: #DDDDDD;
border-radius: 100%;
position: absolute;
}
.h {
width: 10px;
height: 70px;
background-color: red
}
.m {
width: 5px;
height: 80px;
background-color: blue
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="clock">
</div>
</body>
</html>

Here is a clock example made by Eric Brewer on CodePen.
I have compiled SCSS and Pug keeping only the necessary parts of the code to make the clock work. This version doesn't require any JavaScript to run.
However, I have added some JavaScript code to make it start from a particular position. This can be achieved using the class Date to get the current date and setting the animation-delay CSS property with the property animationDelay for each clock arms.
Here is the working code:
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}
setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
.number:nth-child(1) {
transform: rotate(25deg);
}
.number:nth-child(1) span {
display: block;
transform: rotate(-25deg);
}
.number:nth-child(2) {
transform: rotate(55deg);
}
.number:nth-child(2) span {
display: block;
transform: rotate(-55deg);
}
.number:nth-child(3) {
transform: rotate(85deg);
}
.number:nth-child(3) span {
display: block;
transform: rotate(-85deg);
}
.number:nth-child(4) {
transform: rotate(115deg);
}
.number:nth-child(4) span {
display: block;
transform: rotate(-115deg);
}
.number:nth-child(5) {
transform: rotate(145deg);
}
.number:nth-child(5) span {
display: block;
transform: rotate(-145deg);
}
.number:nth-child(6) {
transform: rotate(178deg);
}
.number:nth-child(6) span {
display: block;
transform: rotate(-175deg);
}
.number:nth-child(7) {
transform: rotate(205deg);
}
.number:nth-child(7) span {
display: block;
transform: rotate(-205deg);
}
.number:nth-child(8) {
transform: rotate(235deg);
}
.number:nth-child(8) span {
display: block;
transform: rotate(-235deg);
}
.number:nth-child(9) {
transform: rotate(265deg);
}
.number:nth-child(9) span {
display: block;
transform: rotate(-265deg);
}
.number:nth-child(10) {
transform: rotate(295deg);
}
.number:nth-child(10) span {
display: block;
transform: rotate(-295deg);
}
.number:nth-child(11) {
transform: rotate(325deg);
}
.number:nth-child(11) span {
display: block;
transform: rotate(-325deg);
}
.number:nth-child(12) {
transform: rotate(355deg);
}
.number:nth-child(12) span {
display: block;
transform: rotate(-355deg);
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second .body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: red;
z-index: 4;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers">
<div class="number number-1"><span>1</span></div>
<div class="number number-2"><span>2</span></div>
<div class="number number-3"><span>3</span></div>
<div class="number number-4"><span>4</span></div>
<div class="number number-5"><span>5</span></div>
<div class="number number-6"><span>6</span></div>
<div class="number number-7"><span>7</span></div>
<div class="number number-8"><span>8</span></div>
<div class="number number-9"><span>9</span></div>
<div class="number number-10"><span>10</span></div>
<div class="number number-11"><span>11</span></div>
<div class="number number-12"><span>12</span></div>
</div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
<div class="body"></div>
</div>
</div>
</div>
</div>
Simply set the current date in date, the JavaScript code will loop through the clock's arms and delay each animation. CSS animation will allow the clock to run continuously after page has been loaded.
This method is a lot more efficient than using a JavaScript function to compute the positions and move clock hands. CSS animations are way more powerful here.
EDIT :
When you're programming a piece of code you should always start with a piece of paper and define what you want, how you will achieve it before starting typing. You have to have a plan before typing, otherwise, it will simply not work.
So as you told me you only want to position the number ticks (the original question wasn't that clear...). It's easier to have all ticks as black rectangles positioned in the center, set their height and width. So we have:
Then use the transform property to rotate each tick to the right angle: 0°, 30°, 60°, 90°, ..., 300°, 330° and 360°. Use rotate(x deg).
Lastly here's the trick to the set the ticks' size correctly:
use a gradient to hide the part of the tick closer to the center so we only show the tip of each tick:
background: linear-gradient(
to top,
#eee 0%,
#eee 80%,
black 80%,
black 100%
);
In the end you should have:
Combining this with the previous code to make the clock turn you get:
let drawTicks = function() {
for (let i = 1; i < 13; i++) {
let el = document.createElement('div');
el.setAttribute('class', `number number${i}`);
el.style.transform = `rotate(${i*30}deg)`;
document.querySelector('.numbers').appendChild(el);
}
}; drawTicks()
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}; setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
width: 5px;
background: linear-gradient( to top, #eee 0%, #eee 80%, black 80%, black 100%);
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers"></div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
</div>
</div>
</div>
</div>

less is not defined within head

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script type="text/javascript">
$(function () {
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
});
</script>
I try to use this code http://jsfiddle.net/andsens/Yns9P/ but my console say less is not defined, happening at the line of less.refreshStyles();. I also tried to include it at the body, still giving me the same error.

I had the same "Less is not defined" issue trying to get that exact code to work locally. I was also looking at the jsfiddle from this tutorial on radial progress bars with CSS.
After wrestling my way through the tutorial again to try and find what I missed I came across the authors GIT for the tutorial blog.
I don't know much about Less, I was just tinkering around.
Here is code that got things running in the end.
So it seems like I missed the tag:
<style type="text/less><style>
Here is the full code from the git page:
<!DOCTYPE html>
<html>
<head>
<style type="text/less">
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
#circle-size: 120px;
#circle-background: #d6dadc;
#circle-color: #97a71d;
#inset-size: 90px;
#inset-color: #fbfbfb;
#transition-length: 1s;
#shadow: 6px 6px 10px rgba(0,0,0,0.2);
#percentage-color: #97a71d;
#percentage-font-size: 22px;
#percentage-text-width: 57px;
margin: 50px;
width: #circle-size;
height: #circle-size;
background-color: #circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: #circle-size;
height: #circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: #shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform #transition-length;
transition: -ms-transform #transition-length;
transition: transform #transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, #circle-size, #circle-size, #circle-size/2);
.fill {
clip: rect(0px, #circle-size/2, #circle-size, 0px);
background-color: #circle-color;
}
}
}
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: (#circle-size - #inset-size)/2;
margin-top: (#circle-size - #inset-size)/2;
background-color: #inset-color;
border-radius: 50%;
box-shadow: #shadow;
.percentage {
height: #percentage-font-size;
width: #percentage-text-width;
overflow: hidden;
position: absolute;
top: (#inset-size - #percentage-font-size) / 2;
left: (#inset-size - #percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -#percentage-font-size;
transition: width #transition-length;
span {
width: #percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: #percentage-font-size;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #percentage-color;
}
}
}
}
#i: 0;
#increment: 180deg / 100;
.loop (#i) when (#i <= 100) {
&[data-progress="#{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(#increment * #i);
-ms-transform: rotate(#increment * #i);
transform: rotate(#increment * #i);
}
.fill.fix {
-webkit-transform: rotate(#increment * #i * 2);
-ms-transform: rotate(#increment * #i * 2);
transform: rotate(#increment * #i * 2);
}
}
.inset .percentage .numbers {
width: #i * #percentage-text-width + #percentage-text-width;
}
}
.loop(#i + 1);
}
.loop(#i);
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
});
</script>
</head>
<body>
Animate percentage
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage">
<div class="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.