Loading Status Added

yasinuysal33 · Jan 14, 2023 · ff8b046 · ff8b046
1 parent f05cca8
commit ff8b046
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 5 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,8 @@ import {
   Environment,
   OrbitControls,
   PerspectiveCamera,
+  Html,
+  useProgress,
 } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import {
@@ -19,6 +21,17 @@ import { FloatingGrid } from "./FloatinGrid";
 import { Ground } from "./Ground";
 import { Rings } from "./Rings";
 import "./style.css";
+import LoadingSpinner from "./ui/LoadingSpinner";
+
+function Loader() {
+  const { progress } = useProgress();
+  return (
+    <Html center>
+      <LoadingSpinner />
+      <div className="loading">{Math.round(progress)}%</div>
+    </Html>
+  );
+}
 
 function CarShow() {
   return (
@@ -95,11 +108,11 @@ function CarShow() {
 
 function App() {
   return (
-    <Suspense fallback={null}>
-      <Canvas shadows>
+    <Canvas shadows>
+      <Suspense fallback={<Loader />}>
         <CarShow />
-      </Canvas>
-    </Suspense>
+      </Suspense>
+    </Canvas>
   );
 }
 

diff --git a/src/Boxes.js b/src/Boxes.js
@@ -10,7 +10,6 @@ function Box({ color }) {
   const [scale] = useState(() => Math.pow(Math.random(), 2.0) * 0.5 + 0.05);
 
   const [position, setPosition] = useState(getInitialPosition());
-  console.log(position);
 
   function getInitialPosition() {
     let v = new Vector3(

diff --git a/src/style.css b/src/style.css
@@ -7,3 +7,15 @@ canvas {
   margin: 0;
   overflow: hidden;
 }
+
+.loading {
+  color: rgb(155, 155, 155);
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 12px;
+  font-weight: 900;
+  position: absolute;
+  text-align: center;
+  margin-top: 20px;
+  margin-left: 5px;
+  height: 40px;
+}
diff --git a/src/ui/LoadingSpinner.js b/src/ui/LoadingSpinner.js
@@ -0,0 +1,7 @@
+import classes from "./LoadingSpinner.module.css";
+
+const LoadingSpinner = () => {
+  return <div className={classes.spinner}></div>;
+};
+
+export default LoadingSpinner;
diff --git a/src/ui/LoadingSpinner.module.css b/src/ui/LoadingSpinner.module.css
@@ -0,0 +1,29 @@
+.spinner {
+  /* margin: auto;
+  padding-top: 0; */
+  /* width: 50%; */
+  width: 50px;
+  height: 50px;
+  position: absolute;
+}
+.spinner:after {
+  margin: auto;
+  width: 50%;
+  content: "";
+  display: block;
+  width: 45px;
+  height: 45px;
+
+  border-radius: 50%;
+  border: 4px solid teal;
+  border-color: #05385a transparent rgb(0, 162, 255) transparent;
+  animation: spinner 1.2s linear infinite;
+}
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}