Skip to content

Commit 7f097a0

Browse files
author
NaTi Jhon
committed
README update
1 parent e58026b commit 7f097a0

File tree

4 files changed

+77
-2
lines changed

4 files changed

+77
-2
lines changed
Loading

2. Loading animation/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Creative Loading Animation</title>
7+
<link rel="shortcut icon" href="assets/icons8-animation-96.png" type="image/x-icon">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<section class="wrapper">
12+
<div class="loader">
13+
<div class="loading one"></div>
14+
<div class="loading two"></div>
15+
<div class="loading three"></div>
16+
<div class="loading four"></div>
17+
</div>
18+
</section>
19+
</body>
20+
</html>

2. Loading animation/style.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #00008bcb;
9+
}
10+
11+
.wrapper {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
}
17+
18+
.wrapper .loader {
19+
display: flex;
20+
justify-content: space-evenly;
21+
padding: 0 20px;
22+
}
23+
.loader .loading {
24+
background: #fff;
25+
width: 30px;
26+
height: 30px;
27+
border-radius: 50%;
28+
margin: 0 10px;
29+
animation: load 0.8s ease infinite;
30+
31+
}
32+
.loader .loading.one{
33+
animation-delay: 0.3s;
34+
}
35+
36+
.loader .loading.two{
37+
animation-delay: 0.4s;
38+
}
39+
40+
.loader .loading.three{
41+
animation-delay: 0.5s;
42+
}
43+
44+
@keyframes load {
45+
0%{
46+
width: 30px;
47+
height: 30px;
48+
}
49+
50+
50%{
51+
width: 20px;
52+
height: 20px;
53+
}
54+
}

README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ Each project has its own directory containing `index.html`, `style.css`, and `sc
1616

1717
Contributions are highly encouraged! If you have an amazing project to add, simply fork the repository, create a new branch, add your project files, and submit a pull request.
1818

19-
## I USED ICONS8.COM For favicons the credit goes to them
20-
You can check them through this link [`ICONS8`](https://icons8.com/icons/)
19+
## Credit
20+
- For Favicon [`ICONS8`](https://icons8.com/icons/)
21+
- For Stock fotage i used [`PEXELS`](https://www.pexels.com/)

0 commit comments

Comments
 (0)