Liu Song’s Projects

diff --git a/pages/custom-loader-v1.tsx b/pages/custom-loader-v1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b9031ecd6675ce872f8de3689a178b17b1d368aa
--- /dev/null
+++ b/pages/custom-loader-v1.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import Container from '@components/Container';
+
+const CustomLoader = () => {
+    return <>
+      <Container>
+        <span className="loader"></span>
+      </Container>
+      <style jsx>
+      {`
+.loader {
+    width: 54px;
+    height: 54px;
+    border: 4px solid #FFF;
+    border-radius: 50%;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    animation: loader-anim 3s linear infinite;
+}
+
+.loader::after {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  border: 4px solid;
+  border-color: #FF9950 transparent;
+}
+
+@keyframes loader-anim {
+    0% {
+        transform: scale(1) rotate(360deg);
+    }
+
+    50% {
+        transform: scale(.7) rotate(-360deg);
+    }
+
+    100% {
+        transform: scale(1) rotate(360deg);
+    }
+}
+`}
+                </style>
+    </>
+}
+
+export default CustomLoader;
\ No newline at end of file




diff --git a/pages/index.tsx b/pages/index.tsx
index 15f0c13555e66c1e470c5a21bb1203bfb7715cbc..16dec90b0b0175c40cae4913b01f1eec1ee2d30d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -89,6 +89,13 @@                     
                 </Link>
             </li>
             <li>
+                <Link href="/custom-loader-v1">
+                    <a>
+                        Pure CSS Loader (v1)
+                    </a>
+                </Link>
+            </li>
+            <li>
                 <Link href="/custom-loader">
                     <a>
                         Pure CSS Loader




diff --git a/pages/zoom-image-hover-effect.tsx b/pages/zoom-image-hover-effect.tsx
index fb44a00d0bb56f28d260ab78f5fff3141b12797a..13643556a1517ba0388dd4d7ae4b8a722e2beb77 100644
--- a/pages/zoom-image-hover-effect.tsx
+++ b/pages/zoom-image-hover-effect.tsx
@@ -26,8 +26,7 @@ }`}
                 </style>
         </>
 
-            <div className="zoom-wrapper">
-
+            </div>
 }
 
 export default zoomPage;
\ No newline at end of file