diff --git a/CSS-Projects/loading-animation/index.html b/CSS-Projects/loading-animation/index.html
new file mode 100644
index 0000000..d14a199
--- /dev/null
+++ b/CSS-Projects/loading-animation/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Loading Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/CSS-Projects/loading-animation/style.css b/CSS-Projects/loading-animation/style.css
new file mode 100644
index 0000000..c1eabaf
--- /dev/null
+++ b/CSS-Projects/loading-animation/style.css
@@ -0,0 +1,99 @@
+* {
+ margin: 0;
+ padding: 0;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+section {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #042104;
+ -webkit-animation: bgAnimation 10s linear infinite;
+ animation: bgAnimation 10s linear infinite;
+}
+
+section .loader {
+ position: relative;
+ width: 120px;
+ height: 120px;
+}
+
+section .loader span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ -webkit-transform: rotate(calc(18deg * var(--i)));
+ transform: rotate(calc(18deg * var(--i)));
+}
+
+section .loader span::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #00ff0a;
+ -webkit-box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 60px #00ff0a,
0 0 80px #00ff0a,
0 0 100px #00ff0a;
+ box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 60px #00ff0a,
0 0 80px #00ff0a,
0 0 100px #00ff0a;
+ -webkit-animation: loadingAnimation 2s linear infinite;
+ animation: loadingAnimation 2s linear infinite;
+ -webkit-animation-delay: calc(.1s * var(--i));
+ animation-delay: calc(.1s * var(--i));
+}
+
+@-webkit-keyframes bgAnimation {
+ 0% {
+ -webkit-filter: hue-rotate(0deg);
+ filter: hue-rotate(0deg);
+ }
+ 100% {
+ -webkit-filter: hue-rotate(360deg);
+ filter: hue-rotate(360deg);
+ }
+}
+
+@keyframes bgAnimation {
+ 0% {
+ -webkit-filter: hue-rotate(0deg);
+ filter: hue-rotate(0deg);
+ }
+ 100% {
+ -webkit-filter: hue-rotate(360deg);
+ filter: hue-rotate(360deg);
+ }
+}
+
+@-webkit-keyframes loadingAnimation {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 80%, 100% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+}
+
+@keyframes loadingAnimation {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ 80%, 100% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+}
diff --git a/CSS-Projects/loading-animation/style.scss b/CSS-Projects/loading-animation/style.scss
new file mode 100644
index 0000000..2149ded
--- /dev/null
+++ b/CSS-Projects/loading-animation/style.scss
@@ -0,0 +1,68 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #042104;
+ animation: bgAnimation 10s linear infinite;
+
+ .loader {
+ position: relative;
+ width: 120px;
+ height: 120px;
+
+ span {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform: rotate(calc(18deg * var(--i)));
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #00ff0a;
+ box-shadow: 0 0 10px #00ff0a,
+ 0 0 20px #00ff0a,
+ 0 0 40px #00ff0a,
+ 0 0 60px #00ff0a,
+ 0 0 80px #00ff0a,
+ 0 0 100px #00ff0a;
+ animation: loadingAnimation 2s linear infinite;
+ animation-delay: calc(.1s * var(--i));
+ }
+ }
+ }
+}
+
+@keyframes bgAnimation {
+ 0% {
+ filter: hue-rotate(0deg);
+ }
+
+ 100% {
+ filter: hue-rotate(360deg);
+ }
+}
+
+@keyframes loadingAnimation {
+ 0% {
+ transform: scale(1);
+ }
+
+ 80%,100% {
+ transform: scale(0);
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 2bae969..16c97cd 100644
--- a/index.html
+++ b/index.html
@@ -523,6 +523,11 @@ CSS & JS
List Item Hover Effect
+
+
+ Loading Animation
+
+
@@ -796,6 +801,8 @@ CSS & JS
+
+
-->