loading added

abuanwar072 · Nov 16, 2023 · 2a0f343 · 2a0f343
1 parent 06f9975
commit 2a0f343
Showing 1 changed file with 232 additions and 42 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-<head>
- <!--
+ <head>
+  <!--
  If you are serving your web app in a path other than the root, change the
  href value below to reflect the base path you are serving from.
 
@@ -14,46 +14,236 @@
  This is a placeholder for base href that will be replaced by the value of
  the `--base-href` argument provided to `flutter build`.
  -->
- <base href="$FLUTTER_BASE_HREF">
-
- <meta charset="UTF-8">
- <meta content="IE=Edge" http-equiv="X-UA-Compatible">
- <meta name="description" content="A new Flutter project.">
-
- <!-- iOS meta tags & icons -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="apple-mobile-web-app-title" content="shop_app">
- <link rel="apple-touch-icon" href="icons/Icon-192.png">
-
- <!-- Favicon -->
- <link rel="icon" type="image/png" href="favicon.png"/>
-
- <title>shop_app</title>
- <link rel="manifest" href="manifest.json">
-
- <script>
- // The value below is injected by flutter build, do not touch.
- const serviceWorkerVersion = null;
- </script>
- <!-- This script adds the flutter initialization JS code -->
- <script src="flutter.js" defer></script>
-</head>
-<body>
- <script>
- window.addEventListener('load', function(ev) {
- // Download main.dart.js
- _flutter.loader.loadEntrypoint({
- serviceWorker: {
- serviceWorkerVersion: serviceWorkerVersion,
- },
- onEntrypointLoaded: function(engineInitializer) {
- engineInitializer.initializeEngine().then(function(appRunner) {
- appRunner.runApp();
- });
+ <base href="$FLUTTER_BASE_HREF" />
+
+ <meta charset="UTF-8" />
+ <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
+ <meta name="description" content="A new Flutter project." />
+
+ <!-- iOS meta tags & icons -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <meta name="apple-mobile-web-app-title" content="shop_app" />
+ <link rel="apple-touch-icon" href="icons/Icon-192.png" />
+
+ <!-- Favicon -->
+ <link rel="icon" type="image/png" href="favicon.png" />
+
+ <title>shop_app</title>
+ <link rel="manifest" href="manifest.json" />
+
+ <script>
+ // The value below is injected by flutter build, do not touch.
+ const serviceWorkerVersion = null;
+ </script>
+ <!-- This script adds the flutter initialization JS code -->
+ <script src="flutter.js" defer></script>
+
+ <style>
+ body {
+ background: #000;
+ }
+
+ #load {
+ position: absolute;
+ width: 600px;
+ height: 36px;
+ left: 50%;
+ top: 40%;
+ margin-left: -300px;
+ overflow: visible;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
+ }
+
+ #load div {
+ position: absolute;
+ width: 20px;
+ height: 36px;
+ opacity: 0;
+ font-family: Helvetica, Arial, sans-serif;
+ animation: move 2s linear infinite;
+ -o-animation: move 2s linear infinite;
+ -moz-animation: move 2s linear infinite;
+ -webkit-animation: move 2s linear infinite;
+ transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ color: #35c4f0;
+ }
+
+ #load div:nth-child(2) {
+ animation-delay: 0.2s;
+ -o-animation-delay: 0.2s;
+ -moz-animation-delay: 0.2s;
+ -webkit-animation-delay: 0.2s;
+ }
+ #load div:nth-child(3) {
+ animation-delay: 0.4s;
+ -o-animation-delay: 0.4s;
+ -webkit-animation-delay: 0.4s;
+ -webkit-animation-delay: 0.4s;
+ }
+ #load div:nth-child(4) {
+ animation-delay: 0.6s;
+ -o-animation-delay: 0.6s;
+ -moz-animation-delay: 0.6s;
+ -webkit-animation-delay: 0.6s;
+ }
+ #load div:nth-child(5) {
+ animation-delay: 0.8s;
+ -o-animation-delay: 0.8s;
+ -moz-animation-delay: 0.8s;
+ -webkit-animation-delay: 0.8s;
+ }
+ #load div:nth-child(6) {
+ animation-delay: 1s;
+ -o-animation-delay: 1s;
+ -moz-animation-delay: 1s;
+ -webkit-animation-delay: 1s;
+ }
+ #load div:nth-child(7) {
+ animation-delay: 1.2s;
+ -o-animation-delay: 1.2s;
+ -moz-animation-delay: 1.2s;
+ -webkit-animation-delay: 1.2s;
+ }
+
+ @keyframes move {
+ 0% {
+ left: 0;
+ opacity: 0;
+ }
+ 35% {
+ left: 41%;
+ -moz-transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 65% {
+ left: 59%;
+ -moz-transform: rotate(0deg);
+ -webkit-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ -moz-transform: rotate(-180deg);
+ -webkit-transform: rotate(-180deg);
+ -o-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+ opacity: 0;
+ }
+ }
+
+ @-moz-keyframes move {
+ 0% {
+ left: 0;
+ opacity: 0;
+ }
+ 35% {
+ left: 41%;
+ -moz-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 65% {
+ left: 59%;
+ -moz-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ -moz-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+ opacity: 0;
+ }
+ }
+
+ @-webkit-keyframes move {
+ 0% {
+ left: 0;
+ opacity: 0;
+ }
+ 35% {
+ left: 41%;
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 65% {
+ left: 59%;
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ -webkit-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+ opacity: 0;
+ }
+ }
+
+ @-o-keyframes move {
+ 0% {
+ left: 0;
+ opacity: 0;
+ }
+ 35% {
+ left: 41%;
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 65% {
+ left: 59%;
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ opacity: 1;
+ }
+ 100% {
+ left: 100%;
+ -o-transform: rotate(-180deg);
+ transform: rotate(-180deg);
+ opacity: 0;
  }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="load">
+ <div>G</div>
+ <div>N</div>
+ <div>I</div>
+ <div>D</div>
+ <div>A</div>
+ <div>O</div>
+ <div>L</div>
+ </div>
+ <script>
+ window.addEventListener("load", function (ev) {
+ // Download main.dart.js
+ _flutter.loader.loadEntrypoint({
+ serviceWorker: {
+ serviceWorkerVersion: serviceWorkerVersion,
+ },
+ onEntrypointLoaded: function (engineInitializer) {
+ engineInitializer.initializeEngine().then(function (appRunner) {
+ appRunner.runApp();
+ });
+ },
+ });
  });
- });
- </script>
-</body>
+ </script>
+ </body>
 </html>