50 lines
1007 B
CSS
50 lines
1007 B
CSS
#clock {
|
|
font-size: 120px;
|
|
font-weight: 100;
|
|
color: #fff;
|
|
text-align: center;
|
|
bottom: 10%;
|
|
right: 5%;
|
|
z-index: 900010;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
width: 30%;
|
|
}
|
|
|
|
#time {
|
|
margin-bottom: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
width: 95%;
|
|
vertical-align: middle;
|
|
font-family: monospace;
|
|
}
|
|
|
|
#date {
|
|
font-size: 50px;
|
|
margin-top: -40px;
|
|
}
|
|
|
|
/* HTML: <div class="loader"></div> */
|
|
.loader {
|
|
height: 200px;
|
|
aspect-ratio: 2/3;
|
|
--c:no-repeat linear-gradient(#fff 0 0);
|
|
background: var(--c), var(--c), var(--c), var(--c);
|
|
background-size: 50% 33.4%;
|
|
animation: l8 1.5s infinite linear;
|
|
}
|
|
@keyframes l8 {
|
|
0%,
|
|
5% {background-position:0 25%,100% 25%,0 75%,100% 75%}
|
|
33% {background-position:0 50%,100% 0,0 100%,100% 50%}
|
|
66% {background-position:0 50%,0 0,100% 100%,100% 50%}
|
|
95%,
|
|
100% {background-position:0 75%,0 25%,100% 75%,100% 25%}
|
|
}
|