Skip to content

Commit dffb428

Browse files
l-whitel-white
authored
Merge pull request #2876 from shanolhere/shanolhere-loaderAnimation
Loader animation
2 parents 3df23cc + 9c2c88f commit dffb428

File tree

4 files changed

+126
-72
lines changed

4 files changed

+126
-72
lines changed

‎Art/shanolhere-dogAnimation/styles.css‎

Lines changed: 70 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,115 @@
1+
12
body {
2-
margin: 0;
3-
display: flex;
4-
justify-content: center;
5-
align-items: center;
6-
height: 100vh;
7-
background-color: #f0f0f0;
8-
overflow: hidden;
3+
margin: 0;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
height: 100vh;
8+
background-color: #f0f0f0;
9+
overflow: hidden;
910
}
1011

1112
.dog {
12-
position: relative;
13-
width: 120px;
14-
height: 120px;
13+
position: relative;
14+
width: 120px;
15+
height: 120px;
1516
}
1617

1718
/* Dog Body */
1819
.body {
19-
width: 70px;
20-
height: 50px;
21-
background-color: #b5651d;
22-
border-radius: 50%;
23-
position: absolute;
24-
top: 30px;
25-
left: 25px;
20+
width: 70px;
21+
height: 50px;
22+
background-color: #b5651d;
23+
border-radius: 50%;
24+
position: absolute;
25+
top: 30px;
26+
left: 25px;
2627
}
2728

2829
/* Dog Head */
2930
.head {
30-
width: 60px;
31-
height: 60px;
32-
background-color: #b5651d;
33-
border-radius: 50%;
34-
position: absolute;
35-
top: 0;
36-
left: 30px;
31+
width: 60px;
32+
height: 60px;
33+
background-color: #b5651d;
34+
border-radius: 50%;
35+
position: absolute;
36+
top: 0;
37+
left: 30px;
3738
}
3839

3940
/* Dog Ears */
40-
.ear-left,
41-
.ear-right {
42-
width: 20px;
43-
height: 30px;
44-
background-color: #b5651d;
45-
position: absolute;
46-
top: 0;
47-
border-radius: 50%;
41+
.ear-left, .ear-right {
42+
width: 20px;
43+
height: 30px;
44+
background-color: #b5651d;
45+
position: absolute;
46+
top: 0;
47+
border-radius: 50%;
4848
}
4949
.ear-left {
50-
left: 5px;
51-
transform: rotate(-30deg);
50+
left: 5px;
51+
transform: rotate(-30deg);
5252
}
5353
.ear-right {
54-
right: 5px;
55-
transform: rotate(30deg);
54+
right: 5px;
55+
transform: rotate(30deg);
5656
}
5757

5858
/* Dog Eyes */
59-
.eye-left,
60-
.eye-right {
61-
width: 10px;
62-
height: 10px;
63-
background-color: #fff;
64-
border-radius: 50%;
65-
position: absolute;
66-
top: 20px;
59+
.eye-left, .eye-right {
60+
width: 10px;
61+
height: 10px;
62+
background-color: #fff;
63+
border-radius: 50%;
64+
position: absolute;
65+
top: 20px;
6766
}
6867
.eye-left {
69-
left: 15px;
68+
left: 15px;
7069
}
7170
.eye-right {
72-
right: 15px;
71+
right: 15px;
7372
}
7473

7574
/* Dog Nose */
7675
.nose {
77-
width: 12px;
78-
height: 12px;
79-
background-color: #333;
80-
border-radius: 50%;
81-
position: absolute;
82-
top: 35px;
83-
left: 50%;
84-
transform: translateX(-50%);
76+
width: 12px;
77+
height: 12px;
78+
background-color: #333;
79+
border-radius: 50%;
80+
position: absolute;
81+
top: 35px;
82+
left: 50%;
83+
transform: translateX(-50%);
8584
}
8685

86+
8787
/* Dog Legs */
88-
.leg-left,
89-
.leg-right {
90-
width: 10px;
91-
height: 30px;
92-
background-color: #b5651d;
93-
position: absolute;
94-
top: 70px;
95-
border-radius: 5px;
88+
.leg-left, .leg-right {
89+
width: 10px;
90+
height: 30px;
91+
background-color: #b5651d;
92+
position: absolute;
93+
top: 70px;
94+
border-radius: 5px;
9695
}
9796
.leg-left {
98-
left: 10px;
97+
left: 10px;
9998
}
10099
.leg-right {
101-
right: 10px;
100+
right: 10px;
102101
}
103102

104103
/* Animation for walking */
105104
@keyframes walk {
106-
0%,
107-
100% {
108-
transform: translateX(0);
109-
}
110-
50% {
111-
transform: translateX(300px);
112-
}
105+
0%, 100% {
106+
transform: translateX(0);
107+
}
108+
50% {
109+
transform: translateX(300px);
110+
}
113111
}
114112

115113
.dog {
116-
animation: walk 4s ease-in-out infinite;
114+
animation: walk 4s ease-in-out infinite;
117115
}

‎Art/shanolhere-loaderAnimation/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Loader Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="loader">
11+
<div class="dot"></div>
12+
<div class="dot"></div>
13+
<div class="dot"></div>
14+
</div>
15+
</body>
16+
</html>

‎Art/shanolhere-loaderAnimation/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Loader Animation",
3+
"githubHandle": "shanolhere"
4+
}

‎Art/shanolhere-loaderAnimation/styles.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
background-color: #f0f0f0;
7+
margin: 0;
8+
}
9+
10+
.loader {
11+
display: flex;
12+
align-items: flex-end;
13+
}
14+
15+
.dot {
16+
width: 15px;
17+
height: 15px;
18+
margin: 0 5px;
19+
background-color: #3498db;
20+
border-radius: 50%;
21+
animation: bounce 0.6s infinite alternate;
22+
}
23+
24+
.dot:nth-child(2) {
25+
animation-delay: 0.2s;
26+
}
27+
28+
.dot:nth-child(3) {
29+
animation-delay: 0.4s;
30+
}
31+
32+
@keyframes bounce {
33+
to {
34+
transform: translateY(-20px);
35+
}
36+
}

0 commit comments

Comments
 (0)