1- <!DOCTYPE html>
2- < html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
5- < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7- < title > Wavy Circle Loader Using CSS Animations</ title >
8- < link rel ="stylesheet " href ="style.css ">
9- </ head >
10- < body >
11- < div class ="circle ">
12- < span > </ span >
13- < span > </ span >
14- < span > </ span >
15- < span > </ span >
16- < span > </ span >
17- < span > </ span >
18- < span > </ span >
19- < span > </ span >
20- < span > </ span >
21- < span > </ span >
22- < span > </ span >
23- < span > </ span >
24- < span > </ span >
25- < span > </ span >
26- < span > </ span >
27- </ div >
28- </ body >
29- </ html >
1+ /* Loader Container Styling */
2+ body {
3+ display: flex;
4+ justify-content: center;
5+ align-items: center;
6+ height: 100vh;
7+ background: #f0f0f0;
8+ margin: 0;
9+ }
10+
11+ /* Circle Container Styling */
12+ .circle {
13+ position: relative;
14+ width: 150px;
15+ height: 150px;
16+ }
17+
18+ /* Circle Span Styling */
19+ .circle span {
20+ position: absolute;
21+ width: 100%;
22+ height: 100%;
23+ background: #4CAF50;
24+ border-radius: 50%;
25+ opacity: 0;
26+ animation: wave 1.5s linear infinite;
27+ }
28+
29+ /* Creating Multiple Circle Animations */
30+ .circle span:nth-child(1) {
31+ transform: rotate(0deg);
32+ animation-delay: 0s;
33+ }
34+ .circle span:nth-child(2) {
35+ transform: rotate(24deg);
36+ animation-delay: -0.1s;
37+ }
38+ .circle span:nth-child(3) {
39+ transform: rotate(48deg);
40+ animation-delay: -0.2s;
41+ }
42+ .circle span:nth-child(4) {
43+ transform: rotate(72deg);
44+ animation-delay: -0.3s;
45+ }
46+ .circle span:nth-child(5) {
47+ transform: rotate(96deg);
48+ animation-delay: -0.4s;
49+ }
50+ .circle span:nth-child(6) {
51+ transform: rotate(120deg);
52+ animation-delay: -0.5s;
53+ }
54+ .circle span:nth-child(7) {
55+ transform: rotate(144deg);
56+ animation-delay: -0.6s;
57+ }
58+ .circle span:nth-child(8) {
59+ transform: rotate(168deg);
60+ animation-delay: -0.7s;
61+ }
62+ .circle span:nth-child(9) {
63+ transform: rotate(192deg);
64+ animation-delay: -0.8s;
65+ }
66+ .circle span:nth-child(10) {
67+ transform: rotate(216deg);
68+ animation-delay: -0.9s;
69+ }
70+ .circle span:nth-child(11) {
71+ transform: rotate(240deg);
72+ animation-delay: -1s;
73+ }
74+ .circle span:nth-child(12) {
75+ transform: rotate(264deg);
76+ animation-delay: -1.1s;
77+ }
78+ .circle span:nth-child(13) {
79+ transform: rotate(288deg);
80+ animation-delay: -1.2s;
81+ }
82+ .circle span:nth-child(14) {
83+ transform: rotate(312deg);
84+ animation-delay: -1.3s;
85+ }
86+ .circle span:nth-child(15) {
87+ transform: rotate(336deg);
88+ animation-delay: -1.4s;
89+ }
90+
91+ /* Wave Animation */
92+ @keyframes wave {
93+ 0% {
94+ opacity: 1;
95+ transform: scale(0.2);
96+ }
97+ 50% {
98+ opacity: 0.5;
99+ transform: scale(1);
100+ }
101+ 100% {
102+ opacity: 0;
103+ transform: scale(1.5);
104+ }
105+ }
0 commit comments