console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
<style>
.gl-cloud-loader {
position: relative;display: inline-block;overflow: hidden;
}
.gl-cloud-loader > * {position: relative;}
.gl-cloud-loader .bg-cloud {
position: absolute;border-radius: 30%;
width: 100%;height: 100%;background-color: #c8ede6;
}
.gl-cloud-loader .circle-wrapper {
margin: 60px;border-radius: 100%;
border: 3px solid #000;position: relative;z-index: 1;
}
.gl-cloud-loader .circle-border {
border-radius: 100%;
border: 16px solid #78a0cf;border-top-color: #fff;
}
.gl-cloud-loader .circle {
width: 80px;height: 80px;border-radius: 100%;
border: 3px solid #000;
}
.gl-cloud-loader svg.cloud.l {
position: absolute;width: 120px;top: 60%;left: -10px;z-index: 2;
}
.gl-cloud-loader svg.cloud.r {
position: absolute;width: 120px;top: 25%;right: 5px;
}
</style>
</head>
<body>
<div class='gl-cloud-loader'>
<div class='bg-cloud'></div>
<div class='circle-wrapper'>
<div class='circle-border'><div class='circle'></div></div>
</div>
<svg viewBox='0 0 300 100' class='cloud l' preserveAspectRatio='none' aria-hidden='true'>
<path d='M0,100 Q30,50 80,70 M70,60 Q110,20 140,50 Q160,-20 210,30 Q260,0 300,100 L300 100 L0 100' fill='#fff'></path>
</svg>
<svg viewBox='0 0 300 100' class='cloud r' preserveAspectRatio='none' aria-hidden='true'>
<path d='M0,100 Q30,50 80,70 M70,60 Q110,20 140,50 Q160,-20 210,30 Q260,0 300,100 L300 100 L0 100' fill='#fff'></path>
</svg>
</div>
</body>
</html>