HTML
1
2
3
4
<div class="loader"> <span>LOADING</span> <span>LOADING</span> </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.loader { position: relative; } .loader span { position: absolute; transform: translate(-50%, -50%); font-size: 50px; font-weight: 600; } .loader span:nth-child(1) { color: transparent; -webkit-text-stroke: 1px rgb(27, 27, 27); } .loader span:nth-child(2) { color: rgb(181, 255, 22); animation: waves 3s infinite; } @keyframes waves { 0%, 100% { clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } }