CodePen Embed - Wave-loader Animation Pure css

<!--Made By Fauxy, Subscribe to my YouTube channel  U CAN CODE-->
<!--Don't forgrt to Share and Subscribe-->
<!DOCTYPE Html>
<html>
    <head>
        <title>Water Loader Animation</title>
        <meta name="viewport" content="width=device-width">
</head>
    <body>
        <div class="water"></div>
    </body>
</html>

 body{
            width: 100%;
            height: 100vh;
            background-color: #555;
            display: flex;
            justify-content: center;
            align-items: center;
            }
        .water{
            width:400px;
            height: 400px;
            background-color: skyblue;
            border-radius: 50%;
            position: relative;
            box-shadow: inset 0 0 30px 0 rgba(0,0,0,.5), 0 4px 10px 0 rgba(0,0,0,.5);
            overflow: hidden;
        }
        .water:before, .water:after{
            content:'';
            position: absolute;
            width:400px;
            height: 400px;
            top:-150px;
            background-color: #fff;
        }
        .water:before{
            border-radius: 45%;
            background:rgba(255,255,255,.7);
            animation:wave 5s linear infinite;
        }
        .water:after{
            border-radius: 35%;
            background:rgba(255,255,255,.3);
            animation:wave 5s linear infinite;
        }
        @keyframes wave{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }

This Pen is owned by UCanCode on CodePen.

See more by @FauxyCoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.