Netbyzz

+91 91067 67818

#A076
Loader Animation

HTML :

<!-- CODE = #A076 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NETBYZZ A076</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="absCenter">
      <div class="loaderPill">
        <div class="loaderPill-anim">
          <div class="loaderPill-anim-bounce">
            <div class="loaderPill-anim-flop">
              <div class="loaderPill-pill"></div>
            </div>
          </div>
        </div>
        <div class="loaderPill-floor">
          <div class="loaderPill-floor-shadow"></div>
        </div>
        <div class="loaderPill-text">Your Website name</div>
      </div>
    </div>
  </body>
</html>

CSS :

@import url("https://fonts.googleapis.com/css?family=Montserrat");

:root {
    --EASE_INOUT_QUAD: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --EASE_IN_QUAD: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --EASE_OUT_QUAD: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --COLOR_UI_PHARMACY: #1253c8;
    --loaderPill_DURATION: 1800ms;
}

body {
    font-family: "Montserrat", sans-serif;
}

.absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loaderPill {
    text-align: center;
}

.loaderPill-anim {
    height: 160px;
}

.loaderPill-anim-bounce {
    -webkit-animation: loaderPillBounce var(--loaderPill_DURATION) linear infinite;
    animation: loaderPillBounce var(--loaderPill_DURATION) linear infinite;
}

.loaderPill-anim-flop {
    transform-origin: 50% 50%;
    -webkit-animation: loaderPillFlop var(--loaderPill_DURATION) linear infinite;
    animation: loaderPillFlop var(--loaderPill_DURATION) linear infinite;
}

.loaderPill-pill {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid var(--COLOR_UI_PHARMACY);
    background-image: linear-gradient(to right,
            var(--COLOR_UI_PHARMACY) 50%,
            #ffffff 50%);
}

.loaderPill-floor {
    display: block;
    text-align: center;
}

.loaderPill-floor-shadow {
    display: inline-block;
    width: 70px;
    height: 7px;
    border-radius: 50%;
    background-color: color(var(--COLOR_UI_PHARMACY) alpha(26%));
    transform: translateY(-15px);
    -webkit-animation: loaderPillScale var(--loaderPill_DURATION) linear infinite;
    animation: loaderPillScale var(--loaderPill_DURATION) linear infinite;
}

.loaderPill-text {
    font-weight: bold;
    color: var(--COLOR_UI_PHARMACY);
    text-transform: uppercase;
}

@-webkit-keyframes loaderPillBounce {
    0% {
        transform: translateY(123px);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    25% {
        transform: translateY(40px);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    50% {
        transform: translateY(120px);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    75% {
        transform: translateY(20px);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    100% {
        transform: translateY(120px);
    }
}

@keyframes loaderPillBounce {
    0% {
        transform: translateY(123px);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    25% {
        transform: translateY(40px);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    50% {
        transform: translateY(120px);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    75% {
        transform: translateY(20px);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    100% {
        transform: translateY(120px);
    }
}

@-webkit-keyframes loaderPillFlop {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(450deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@keyframes loaderPillFlop {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(450deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

@-webkit-keyframes loaderPillScale {
    0% {
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    25% {
        transform: translateY(-15px) scale(0.7, 1);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    50% {
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    75% {
        transform: translateY(-15px) scale(0.6, 1);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    100% {
        transform: translateY(-15px) scale(1, 1);
    }
}

@keyframes loaderPillScale {
    0% {
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    25% {
        transform: translateY(-15px) scale(0.7, 1);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    50% {
        transform: translateY(-15px) scale(1, 1);
        -webkit-animation-timing-function: var(--EASE_OUT_QUAD);
        animation-timing-function: var(--EASE_OUT_QUAD);
    }

    75% {
        transform: translateY(-15px) scale(0.6, 1);
        -webkit-animation-timing-function: var(--EASE_IN_QUAD);
        animation-timing-function: var(--EASE_IN_QUAD);
    }

    100% {
        transform: translateY(-15px) scale(1, 1);
    }
}

Source Code

Download Now