.status-wrapper
.messages
p.client Client: I... would... like... to... request...a...
.number 4
.timer-container
.exclamation-marks
- for(var i=0; i < 4; i++)
.exclamation
.timer
.handle-group
.handle
.border
.inner
.base
.body
.button-group
.base
.button
.border
.inner-body-group
.border-gaps
.inner-body
.reflection
.hours
- for (var i=0; i < 8; i++)
.hour
.hand
.center
.number.last 8
.messages.bottom
p.server Server: Sorry, I don't have time to wait until you finish your request.
View Compiled
// Inspired by this shot https://dribbble.com/shots/5301081-Timer by Alex Kunchevsky. Preview is not showing the whole animation cycle, I don't know why.¯\_(ツ)_/¯.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
position: absolute;
}
*:before,
*:after {
content: "";
position: absolute;
}
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
}
@mixin center-vh {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
$dark: #243966;
$red: #ff5e7a;
$border-size: 10px;
$animation-duration: 6s;
$opacity-animation-duration: $animation-duration + 0s;
@mixin add-border ($border-size) {
border: $border-size solid $dark;
}
body {
background: #f5f9ff;
.status-wrapper {
@include center-vh;
max-height: 500px;
height: 95vh;
display: flex;
justify-content: center;
align-items: center;
@media(max-width: 767px) {
top: 45%;
height: 75vh;
}
}
.messages {
top: 0;
width: 45vw;
text-align: center;
font-size: 1rem;
color: #fff;
background-color: #21a8ff;
border-radius: 5px;
text-align: left;
padding: 0rem 1rem;
margin-bottom: 20px;
font-weight: bold;
@media(max-width: 767px) {
width: 90vw;
font-size: 0.75rem;
}
&.bottom {
top: auto;
bottom: -20px;
background-color: #f0eff0;
color: $dark;
opacity: 1;
animation: on-finish $opacity-animation-duration + 0.5s linear;
}
p {
position: relative;
}
}
.number {
position: relative;
font-size: 15rem;
color: lighten($red, 2%);
text-shadow: 2px 2px 2px $dark;
opacity: 1;
animation: on-finish $opacity-animation-duration linear;
@media (max-width: 767px) {
font-size: 7.5rem;
}
}
@mixin get-timer-size($timer-size) {
width: $timer-size;
height: $timer-size;
min-width: $timer-size;
min-height: $timer-size;
}
.timer-container {
@include get-timer-size(270px);
position: relative;
z-index: 2;
animation: shake $animation-duration - 1.5s linear $animation-duration -
1.4s;
@media (max-width: 767px) {
@include get-timer-size(150px);
}
.exclamation-marks {
width: 100%;
height: 50%;
top: -10px;
.exclamation {
width: 55px;
height: 9px;
border-radius: 25px;
background: $dark;
opacity: 1;
animation: on-finish $opacity-animation-duration linear;
@media (max-width: 767px) {
width: 20px;
height: 5px;
}
}
.exclamation:nth-child(1) {
bottom: 25%;
left: -25px;
transform: translate(-50%, 0) rotate(20deg);
}
.exclamation:nth-child(2) {
top: 25%;
left: 10%;
width: 40px;
transform: translate(-50%, -50%) rotate(45deg);
@media (max-width: 767px) {
width: 20px;
}
&::before {
bottom: 0;
right: -15px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: $dark;
@media (max-width: 767px) {
width: 5px;
height: 5px;
}
}
}
.exclamation:nth-child(3) {
left: 90%;
top: 25%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.exclamation:nth-child(4) {
bottom: 25%;
right: -25px;
width: 40px;
transform: translate(50%, 0) rotate(-20deg);
@media (max-width: 767px) {
width: 20px;
}
&::before {
bottom: 0;
left: -15px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: $dark;
@media (max-width: 767px) {
width: 5px;
height: 5px;
}
}
}
}
.timer {
@include center-vh;
width: 100%;
height: 100%;
text-align: center;
.handle-group {
left: 0;
right: 0;
margin: 0 auto;
width: 45%;
height: 25%;
.handle {
position: absolute;
left: 50%;
top: -6px;
transform: translate(-50%, 0);
width: 65%;
height: 100%;
@include add-border($border-size);
background: transparent;
border-top-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
border-bottom-left-radius: 40px 35px;
border-bottom-right-radius: 40px 35px;
overflow: hidden;
@media (max-width: 767px) {
border-width: 6px;
}
.border {
@include center-vh;
width: 100%;
height: 100%;
background-color: #21a8ff;
overflow: hidden;
&::before {
background: #56d4f2;
top: 0;
left: -15%;
width: 85%;
height: 50%;
border-radius: 100%;
transform: rotate(-55deg);
}
&::after {
background: #1990ff;
bottom: -10%;
right: -35%;
width: 100%;
height: 50%;
border-radius: 100%;
transform: rotate(-20deg);
z-index: 0;
}
.inner {
@include center-vh;
width: 70%;
height: 70%;
background-color: white;
@include add-border($border-size);
border-top-left-radius: 40px 40px;
border-top-right-radius: 40px 40px;
border-bottom-left-radius: 35px 30px;
border-bottom-right-radius: 35px 30px;
z-index: 1;
@media (max-width: 767px) {
border-width: 6px;
}
}
}
}
.base {
left: 0;
right: 0;
bottom: -23%;
margin: 0 auto;
height: 80%;
width: 35%;
background: #21a8ff;
@include add-border($border-size);
border-radius: 50px;
@media (max-width: 767px) {
border-width: 6px;
}
&::before {
top: 20%;
left: 37%;
width: 50%;
height: 25%;
border-radius: 100%;
background-color: #56d4f2;
transform: translate(-50%, -50%) rotate(-35deg);
}
}
}
.body {
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
width: 80%;
height: 80%;
border-radius: 100%;
z-index: 2;
.button-group {
width: 25%;
height: 25%;
right: 10px;
top: -10%;
z-index: 0;
transform: rotate(40deg);
animation: button $animation-duration - 1s linear;
.base {
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 55%;
height: 50%;
@include add-border($border-size);
background: #1990ff;
@media (max-width: 767px) {
border-width: 6px;
}
}
.button {
@include center-vh;
top: 47%;
height: 50%;
width: 100%;
border-radius: 25px;
@include add-border($border-size);
background: rgb(86, 212, 242);
background: linear-gradient(
90deg,
rgba(86, 212, 242, 1) 50%,
rgba(33, 168, 255, 1) 50%
);
overflow: hidden;
@media (max-width: 767px) {
border-width: 6px;
}
&::before {
@include center-vh;
width: 50%;
height: 150%;
border-left: 6px solid $dark;
border-right: 6px solid $dark;
background: #21a8ff;
@media (max-width: 767px) {
border-width: 3px;
}
}
}
}
.border {
@include center-vh;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: $red;
@include add-border($border-size);
overflow: hidden;
@media (max-width: 767px) {
border-width: 6px;
}
&::before {
background: #ffa9aa;
top: 0;
// left: -60px;
left: -25%;
width: 85%;
height: 50%;
border-radius: 100%;
transform: rotate(-45deg);
}
&::after {
background: #fe3074;
// bottom: -25px;
// right: -50px;
bottom: -10%;
right: -25%;
width: 75%;
height: 50%;
border-radius: 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 0;
}
.inner-body-group {
@include center-vh;
width: 85%;
height: 85%;
border-radius: 100%;
z-index: 2;
@include add-border($border-size);
@media (max-width: 767px) {
border-width: 6px;
}
.border-gap {
top: 75%;
left: 3%;
width: 30px;
height: 30px;
border-radius: 100%;
background: rgb(255, 94, 122);
background: linear-gradient(
90deg,
rgba(255, 94, 122, 1) 50%,
rgba(218, 242, 255, 1) 50%
);
border: 1px solid red;
z-index: 3;
transform: translate(-50%, -50%);
&::before {
@include center-vh;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: orange;
}
}
}
$sky-blue: #cde8ff;
$blue: #21a8ff;
.inner-body {
@include center-vh;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: $sky-blue;
overflow: hidden;
&::before {
width: 125%;
height: 100%;
left: -25%;
top: -15%;
border-radius: 100%;
background-color: #daf2ff;
transform: rotate(-55deg);
}
.reflection {
width: 100%;
height: 100%;
&::before {
top: 30%;
left: 30%;
width: 45%;
height: 30%;
border-radius: 100%;
background-color: #f5feff;
transform: translate(-50%, -50%) rotate(-45deg);
}
&::after {
top: 55%;
left: 10%;
width: 12%;
height: 12%;
border-radius: 100%;
background-color: #f5feff;
}
}
.hours {
left: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 100%;
.hour {
height: 10%;
width: 5%;
left: 50%;
top: 10%;
border-radius: 10px;
background-color: #243966;
transform: translate(-50%, -50%);
}
$degrees: 45;
$y: 25;
$xOffset: -10;
$x: 80;
$position: "right";
@for $i from 2 through (8) {
.hour:nth-child(#{$i}) {
transform: translate(-50%, -50%) rotate(#{$degrees}deg);
top: percentage($y / 100);
left: percentage($x / 100);
}
$degrees: $degrees + 45;
@if ($position == "right") {
$y: $y + 25;
@if ($xOffset > 0) {
$x: $x - 10;
$xOffset: -10;
} @else {
$x: $x + 10;
$xOffset: 10;
}
@if ($y == 100) {
$y: 90;
$x: 50;
$position: "left";
}
} @else {
@if ($y == 90) {
$y: 75;
$x: 20;
} @else {
$y: $y - 25;
@if ($y == 50) {
$x: 10;
} @else {
$x: 20;
}
}
}
}
}
.hand {
position: absolute;
top: 50%;
left: 50%;
width: 20%;
height: 20%;
max-width: 35px;
max-height: 35px;
border-radius: 100%;
background-color: $dark;
transform: translate(-50%, -50%) rotate(-75deg);
z-index: 1;
animation: tick $animation-duration - 2.5s linear 1s;
&::before,
&::after {
@include center-vh;
left: 100%;
height: 10px;
width: 85px;
background-color: $dark;
border-radius: 25px;
z-index: 0;
@media (max-width: 767px) {
width: 40px;
height: 5px;
}
}
&::after {
left: 0%;
width: 20px;
}
.center {
@include center-vh;
width: 45%;
height: 45%;
border-radius: 100%;
background-color: $blue;
z-index: 3;
}
}
}
}
}
}
}
}
@keyframes tick {
0% {
transform: translate(-50%, -50%) rotate(-75deg);
}
100% {
transform: translate(-50%, -50%) rotate(285deg);
}
}
@keyframes button {
5%,
15% {
transform: translateY(0) rotate(40deg);
}
10% {
transform: translateY(5px) translateX(-3px) rotate(40deg);
}
}
@keyframes on-finish {
0% {
opacity: 0;
}
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes shake {
1% {
transform: rotateZ(15deg);
transform-origin: 50% 0%;
}
3% {
transform: rotateZ(-15deg);
transform-origin: 50% 0%;
}
6% {
transform: rotateZ(20deg);
transform-origin: 50% 0%;
}
9% {
transform: rotateZ(-20deg);
transform-origin: 50% 0%;
}
12% {
transform: rotateZ(15deg);
transform-origin: 50% 0%;
}
15% {
transform: rotateZ(-15deg);
transform-origin: 50% 0%;
}
18% {
transform: rotateZ(0);
transform-origin: 50% 0%;
}
100% {
transform: rotateZ(0);
transform-origin: 50% 0%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.