Javascript 如何使用浏览器&x27；默认加载程序是什么？

目前，我正在创建我的博客。在这里，我使用ajax无限加载程序脚本。加载帖子时，显示加载gif，如下所示：

但我不想用那个gif。相反，我希望使用浏览器的默认加载栏（在浏览器中加载请求的页面时，您必须在地址栏中看到这些加载栏。我附加了该加载栏以帮助您）

---

编辑1：这是我正在使用的脚本（）的链接。您可以在脚本中轻松找到gif链接。我想用内置的chrome/任何浏览器加载器来替换gif。（因为我认为这会减少一点博客时间。）

你可以不用使用图像来制作这样的博客。你需要css和html

HTML 现场观看 你应该根据你的主题改变颜色 试试看

---

来源：

不要使用AJAX，浏览器将为您处理加载状态。谢谢您的回答。但是，为什么“不使用AJAX”？我是网络开发的初学者。你的回答对我帮助很大。如果你想让浏览器处理加载状态，最简单的方法是不使用AJAX，浏览器可以为你加载下一页。我认为他根本不想页面中的加载指示器，他希望它使用浏览器的内置chrome。

<div class="loader">
  <svg class="circular" viewBox="25 25 50 50">
   <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>

.loader {
  position: relative;
  margin: 0px auto;
  width: 100px;
}

.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

@keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

@-webkit-keyframes 
  dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}

@keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}

@-webkit-keyframes 
color {  100%, 0% {
 stroke: #3cba54;
}
 40% {
 stroke: #3cba54;
}
 66% {
 stroke: #3cba54;
}
 80%, 90% {
 stroke: #3cba54;
}
}