diff --git a/kinetic-loader/index.html b/kinetic-loader/index.html
new file mode 100644
index 0000000..1ebaee5
--- /dev/null
+++ b/kinetic-loader/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Kinetic Loader
+
+
+
+
+
+
+
diff --git a/kinetic-loader/style.css b/kinetic-loader/style.css
new file mode 100644
index 0000000..f783c59
--- /dev/null
+++ b/kinetic-loader/style.css
@@ -0,0 +1,69 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #2c3e50;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.kinetic {
+ position: relative;
+ height: 80px;
+ width: 80px;
+}
+
+.kinetic::after,
+.kinetic::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border: 50px solid transparent;
+ border-bottom-color: #fff;
+ animation: rotateA 2s linear infinite 0.5s;
+}
+
+.kinetic::before {
+ transform: rotate(90deg);
+ animation: rotateB 2s linear infinite;
+}
+
+@keyframes rotateA {
+ 0%,
+ 25% {
+ transform: rotate(0deg);
+ }
+
+ 50%,
+ 75% {
+ transform: rotate(180deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes rotateB {
+ 0%,
+ 25% {
+ transform: rotate(90deg);
+ }
+
+ 50%,
+ 75% {
+ transform: rotate(270deg);
+ }
+
+ 100% {
+ transform: rotate(450deg);
+ }
+}