summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAbdus <abdus@abdus.net>2021-06-14 16:30:12 +0530
committerAbdus <abdus@abdus.net>2021-06-14 16:30:12 +0530
commit90ca8e473ebbbed02b4343eb6ed5c3c99181c57c (patch)
tree2ec451e3d9ecd16890b11509ac961992121cde86
parentb3fb99c85b1ff2d2c1d8f33af9d1b3c42caad6b5 (diff)
downloadnextjs-eslint-typescript-template-90ca8e473ebbbed02b4343eb6ed5c3c99181c57c.tar.bz2
nextjs-eslint-typescript-template-90ca8e473ebbbed02b4343eb6ed5c3c99181c57c.zip
feat: loader
-rw-r--r--components/Loader/index.tsx23
-rw-r--r--components/Loader/loader.module.css18
-rw-r--r--pages/index.tsx4
3 files changed, 45 insertions, 0 deletions
diff --git a/components/Loader/index.tsx b/components/Loader/index.tsx
new file mode 100644
index 0000000..bbfb61b
--- /dev/null
+++ b/components/Loader/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import classes from './loader.module.css';
+
+type PropType = {
+ size?: number;
+ style?: React.CSSProperties;
+};
+
+export function Loader(props: PropType) {
+ const SIZE = (props.size || 1) * 20;
+
+ return (
+ <div
+ style={{ width: SIZE, height: SIZE, ...props.style }}
+ className={classes.wrapper}
+ />
+ );
+}
+
+Loader.defaultProps = {
+ size: 1,
+ style: {},
+};
diff --git a/components/Loader/loader.module.css b/components/Loader/loader.module.css
new file mode 100644
index 0000000..d63d55a
--- /dev/null
+++ b/components/Loader/loader.module.css
@@ -0,0 +1,18 @@
+.wrapper {
+ display: inline-block;
+ border: 2px solid var(--foreground);
+ border-radius: 100%;
+ animation: loading 0.7s ease-out infinite;
+}
+
+@keyframes loading {
+ from {
+ transform: scale(0);
+ opacity: 1;
+ }
+
+ to {
+ transform: scale(1.2);
+ opacity: 0;
+ }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index e5bc8a8..9ae042d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Layout } from '../components/Layout';
import { ThemeSwitcher } from '../components/ThemeSwitcher';
+import { Loader } from '../components/Loader/index';
// eslint-disable-next-line
export default function Home() {
@@ -13,6 +14,9 @@ export default function Home() {
<code>components/Layout/index.tsx</code>
, and remove default left
and right column values.
+ <div>
+ <Loader />
+ </div>
</Layout>
</>
);