Update loader style (#82485)

packages/flutter_tools/lib/src/web/bootstrap.dart

@@ -22,40 +22,72 @@ String generateBootstrapScript({
 
 var styles = `
   .flutter-loader {
-    width: 100px;
-    height: 100px;
-    border: 10px solid #075b9a;
-    border-bottom-color: #60caf6;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
+    width: 100%;
+    height: 8px;
+    background-color: #13B9FD;
     position: absolute;
-    left: calc(50% - 50px);
-    top: calc(50% - 50px);
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+    top: 0px;
+    left: 0px;
   }
 
-  @keyframes rotation {
+  .indeterminate {
+      position: relative;
+      width: 100%;
+      height: 100%;
+  }
+
+  .indeterminate:before {
+      content: '';
+      position: absolute;
+      height: 100%;
+      background-color: #0175C2;
+      animation: indeterminate_first 2.0s infinite ease-out;
+  }
+
+  .indeterminate:after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      background-color: #02569B;
+      animation: indeterminate_second 2.0s infinite ease-in;
+  }
+
+  @keyframes indeterminate_first {
       0% {
-      transform: rotate(0deg);
+          left: -100%;
+          width: 100%;
       }
       100% {
-      transform: rotate(360deg);
+          left: 100%;
+          width: 10%;
+      }
+  }
+
+  @keyframes indeterminate_second {
+      0% {
+          left: -150%;
+          width: 100%;
+      }
+      100% {
+          left: 100%;
+          width: 10%;
       }
   }
 `;
 
 var styleSheet = document.createElement("style")
-styleSheet.type = "text/css"
-styleSheet.innerText = styles
-document.head.appendChild(styleSheet)
+styleSheet.type = "text/css";
+styleSheet.innerText = styles;
+document.head.appendChild(styleSheet);
 
 var loader = document.createElement('div');
 loader.className = "flutter-loader";
 document.body.append(loader);
 
+var indeterminate = document.createElement('div');
+indeterminate.className = "indeterminate";
+loader.appendChild(indeterminate);
+
 document.addEventListener('dart-app-ready', function (e) {
    loader.parentNode.removeChild(loader);
    styleSheet.parentNode.removeChild(styleSheet);
@@ -203,7 +235,8 @@ String generateTestEntrypoint({
 }
 
 /// Generate the unit test bootstrap file.
-String generateTestBootstrapFileContents(String mainUri, String requireUrl, String mapperUrl) {
+String generateTestBootstrapFileContents(
+    String mainUri, String requireUrl, String mapperUrl) {
   return '''
 (function() {
   if (typeof document != 'undefined') {

packages/flutter_tools/test/general.shard/web/bootstrap_test.dart

@@ -27,6 +27,7 @@ test('generateBootstrapScript includes loading indicator', () {
       mapperUrl: 'mapper.js',
     );
     expect(result, contains('"flutter-loader"'));
+    expect(result, contains('"indeterminate"'));
   });
 
   test('generateMainModule embeds urls correctly', () {