Loading style water animation

<!DOCTYPE html>
<html>
<head>
	<title>BOOTSTRAP4 DATEPICKER | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="BOOTSTRAP4 DATEPICKER">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="water"></div>
</body>
</html>
body{
    width: 100%;
    height: 100vh;
    background-color: #FFF;
    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);
    }
}

                                    
Titre section avec une bande style01

Titre section avec une bande style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style04

Input range slider HTML style04

Form contact avec validation en css

Form contact avec validation en css

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Bloc resizable with jquery

Bloc resizable with jquery

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau