Loaders/Bouncing Ball.html

<html>
<head>
    <title>Bouncing Ball | Loaders</title>
    <style>
        body{
            background-color: white;
        }
        #bouncing-ball{
            margin: 0 auto;
            top: 30px;
            width: 50px;
            height: 50px;
            background: radial-gradient(ellipse at 30px 10px,  #fff 0%, #03a9f4 25%, #000 90%);
            border-radius: 50%;
            animation: ball 0.8s infinite alternate;
        }

        #bouncing-ball::after {
            content: '';
            position: absolute;
            box-shadow: 0 15px 20px rgba(0, 0, 0, 1);
            width: 70%;
            left: 5%;
            height: 2px;
            animation: after 0.8s infinite alternate;
        }

        @keyframes after{
            0% {
                bottom: 10px;
            }
            100% {
                bottom: -100px;
            }
        }

        @keyframes ball{
            0% {
                transform: translateY(100px);
                width: 58px;
            }
            8% {
                width: 50px;
            }
            100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>
<body>
    <div id="bouncing-ball"></div>
</body>
</html>