diff --git a/my code/23-kinetic-loader/index.html b/my code/23-kinetic-loader/index.html
new file mode 100644
index 0000000..df86950
--- /dev/null
+++ b/my code/23-kinetic-loader/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+ 23 kinetic loader
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/23-kinetic-loader/script.js b/my code/23-kinetic-loader/script.js
new file mode 100644
index 0000000..b5653a9
--- /dev/null
+++ b/my code/23-kinetic-loader/script.js
@@ -0,0 +1,8 @@
+const one = document.getElementById("one");
+const two = document.getElementById("two");
+
+while (1) {
+ setTimeout(() => {
+ one.classList.add();
+ }, 2000);
+}
diff --git a/my code/23-kinetic-loader/style.css b/my code/23-kinetic-loader/style.css
new file mode 100644
index 0000000..7bed048
--- /dev/null
+++ b/my code/23-kinetic-loader/style.css
@@ -0,0 +1,67 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: cornflowerblue;
+ height: 100vh;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.container {
+ width: 100px;
+ height: 100px;
+ position: relative;
+}
+
+.triangle {
+ width: 50px;
+ height: 100px;
+ clip-path: polygon(0 0, 100% 50%, 0 100%);
+ background-color: #fff;
+ position: absolute;
+ transform-origin: 100% 50%;
+}
+
+#one {
+ top: 0;
+ left: 0;
+ animation: rotate1 2s linear infinite 0.5s;
+}
+
+#two {
+ transform: rotate(-90deg);
+ /* animation: rotate1 2s linear infinite; */
+}
+
+@keyframes rotate1 {
+ 0%,
+ 25% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(90deg);
+ }
+ 75%,
+ 100% {
+ transform: rotate(180deg);
+ }
+}
+
+@keyframes rotate2 {
+ 0%,
+ 25% {
+ transform: rotate(-90deg);
+ }
+ 50% {
+ transform: rotate(90deg);
+ }
+ 75%,
+ 100% {
+ transform: rotate(270deg);
+ }
+}