<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dragon Yaya</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="main">
        <div class="shadow-wrapper">
            <div class="shadow"></div>
        </div>
        <div class="dragon">
            <div class="body"></div>
            <div class="horn-left"></div>
            <div class="horn-right"></div>
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="blush left"></div>
            <div class="blush right"></div>
            <div class="mouth"></div>
            <div class="tail-sting"></div>
        </div>
        <div class="fire-wrapper">
            <div class="fire"></div>
        </div>
        <div class="progress">
            <span>Loading...</span>
            <div class="outer">
                <div class="inner"></div>
            </div>
        </div>
    </div>
</body>
</html>
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff6e3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    position: relative;
}

.dragon {
    width: 200px;
    height: 140px;
    transform-origin: 50% 80%;
    animation: zoomIn .5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
}

.dragon .body {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 128px;
    background: url("https://i.imgur.com/0VXBlXF.png") no-repeat center center;
    background-size: contain;
    z-index: 10;
}

.dragon .horn-left {
    position: absolute;
    top: -17px;
    left: 32px;
    width: 31px;
    height: 31px;
    background: url("https://i.imgur.com/aYCLYpV.png") no-repeat;
    background-size: contain;
    z-index: 9;
    transform-origin: 150% 200%;
    transform: rotate(-5deg);
    animation: swingRight .5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
}

.dragon .horn-right {
    position: absolute;
    top: -16px;
    left: 110px;
    width: 34px;
    height: 31px;
    background: url("https://i.imgur.com/VJFC2aE.png") no-repeat;
    background-size: contain;
    z-index: 9;
    transform-origin: -50% 200%;
    transform: rotate(5deg);
    animation: swingLeft .5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
}

.dragon .eye {
    position: absolute;
    top: 39px;
    width: 11px;
    height: 11px;
    background: url("https://i.imgur.com/GBCGR0f.png") no-repeat;
    background-size: contain;
    z-index: 12;
}

.dragon .eye.left {
    left: 49px;
}

.dragon .eye.right {
    left: 118px;
    transform-origin: 50% 50%;
    transform: rotate(180deg);
}

.dragon .blush {
    position: absolute;
    top: 46px;
    width: 15px;
    height: 9px;
    background: url("https://i.imgur.com/3cYOsTK.png") no-repeat;
    background-size: 100% 100%;
    z-index: 11;
    animation: blush .5s ease infinite alternate;
}

.dragon .blush.left {
    left: 43px;
}

.dragon .blush.right {
    left: 120px;
}

.dragon .mouth {
    position: absolute;
    top: 52px;
    left: 49px;
    width: 78px;
    height: 56px;
    background: url("https://i.imgur.com/i0LRzdP.png") no-repeat;
    background-size: 100%;
    z-index: 11;
    animation: openMouth 1s ease infinite;
}

.dragon .tail-sting {
    position: absolute;
    top: 67px;
    left: 139px;
    width: 40px;
    height: 38px;
    background: url("https://i.imgur.com/v2CUSXY.png") no-repeat;
    background-size: contain;
    z-index: 9;
    transform-origin: 0 100%;
    animation: tailUp .5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
}

.shadow-wrapper {
    position: absolute;
    top: 110px;
    width: 100%;
}

.shadow {
    margin: 0 auto;
    width: 110px;
    height: 30px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    z-index: 0;
    animation: zoomIn .5s cubic-bezier(0.47, 0, 0.75, 0.72) infinite alternate;
}

.fire-wrapper {
    position: absolute;
    width: 40px;
    top: 60px;
    left: 88px;
    transform: translate(-50%, -50%);
    transform-origin: 50% 100%;
    animation: fireUp 1s ease-in infinite;
}

.fire {
    padding-bottom: 135%;
    width: 100%;
    height: 100%;
    background: url("https://i.imgur.com/iR9OQMg.png") no-repeat;
    background-size: contain;
    animation: fire 1s ease-out infinite;
}

.progress {
    width: 100%;
}
.progress span {
    font-weight: bold;
    color: #fdcd33;
    margin-left: 4px;
}
.progress .outer {
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 3px;
}

.progress .inner {
    width: 0;
    height: 100%;
    background: #ffcd33;
    animation: loading 2s linear infinite;
}

@keyframes zoomIn {
    100% {
        transform: scale(1.16, 1.16);
    }
}

@keyframes swingRight {
    100% {
        transform: rotate(5deg);
    }
}

@keyframes swingLeft {
    100% {
        transform: rotate(-5deg);
    }
}

@keyframes blush {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes openMouth {
    0% {
                clip-path: ellipse(20% 0% at 50% 0);
    }

    50% {
                clip-path: ellipse(100% 100% at 50% 0);
    }

    70% {
                clip-path: ellipse(100% 100% at 50% 0);
    }

    100% {
                clip-path: ellipse(20% 0% at 50% 0);
    }
}

@keyframes tailUp {
    0% {
        transform: scaleY(0.9);
    }

    100% {
        transform: scaleY(1.06);
    }
}

@keyframes loading {
    100% {
        width: 100%;
    }
}

@keyframes fireUp {
    0% {
        top: 70px;
    }

    20% {
        top: 70px;
    }

    100% {
        top: -80px;
    }
}

@keyframes fire {
    0% {
        transform: scale(0, 0);
        opacity: 0.8;
    }

    20% {
        transform: scale(0, 0);
        opacity: 0.8;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.