.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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.