<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3六边形波纹加载动画特效 - 站长素材</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap'>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="hexagon" aria-label="Animated hexagonal ripples">
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
<div class="hexagon__group">
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
<div class="hexagon__sector"></div>
</div>
</div>
<p aria-label="Loading">Loading</p>
</body>
</html>
