JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="semi-container">
<div class="clock"></div>
<p><i>Loading...</i></p>
</div>
</div>
CSS
body{
margin: 0px;
padding: 0px;
}
.container{
text-align: center;
background-color: #ab7dbd;
color: #fff;
opacity:0.8;
overflow: hidden;
padding: 0px;
height: 100%;
}
.semi-container{
display: inline-block;
height: 435px;
width: 100%;
float:left;
position: relative;
transition: all 1s ease;
}
.clock{
border: 5px solid #FFF;
width: 100px;
height: 100px;
border-radius: 55px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.clock:after{
content: "";
position: absolute;
width: 5px;
height: 40px;
color: #FFF;
top: 10px;
border-radius: 10px;
background-color: #FFF;
margin: auto;
-webkit-animation: circular_anim 4s linear infinite;
animation: circular_anim 4s linear infinite;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
}
.clock:before{
content: "";
position: absolute;
width: 5px;
height: 50px;
color: #FFF;
border-radius: 10px;
background-color: #FFF;
margin: auto;
-webkit-animation: circular_anim 1.5s linear infinite;
animation: circular_anim 1.5s linear infinite;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
}
@keyframes circular_anim{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/* Firefox */
@-moz-keyframes circular_anim {
0%{
-moz-transform:rotate(0deg);
}
100%{
-moz-transform:rotate(360deg);
}
}
/* Safari and Chrome */
@-webkit-keyframes circular_anim{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
}
}
/* Internet Explorer */
@-ms-keyframes circular_anim {
0%{
-ms-transform:rotate(0deg);
}
100%{
-ms-transform:rotate(360deg);
}
}
/* Opera */
@-o-keyframes circular_anim {
0%{
-o-transform:rotate(0deg);
}
100%{
-o-transform:rotate(360deg);
}
}
/* If you don't want loading animation you can get rid of...
JavaScript
// NO JAVASCRIPT :)
// http://www.metawarelabs.com