소스 검색

Create loading spinner

Tatiana Inama 6 년 전
부모
커밋
3a245d3390
4개의 변경된 파일233개의 추가작업 그리고 1개의 파일을 삭제
  1. 1 1
      recipes/src/components/Icon/index.tsx
  2. 115 0
      recipes/src/components/Spinner/index.tsx
  3. 15 0
      recipes/src/components/Spinner/styles.scss
  4. 102 0
      recipes/src/svgs/loading.svg

+ 1 - 1
recipes/src/components/Icon/index.tsx

@@ -9,7 +9,7 @@ export type IconProps = {
   icon: string,
   className?: string,
   fill?: string,
-  width?: number,
+  width?: 'auto' | number,
   height?: number,
   material?: boolean,
 }

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 115 - 0
recipes/src/components/Spinner/index.tsx


+ 15 - 0
recipes/src/components/Spinner/styles.scss

@@ -0,0 +1,15 @@
+.cbk-spinner {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(255,255,255,0.7);
+  top: 0;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 15%;
+  }
+}

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 102 - 0
recipes/src/svgs/loading.svg