如何使用浏览器的默认加载器？

Question

当前，我正在创建我的博客。在那儿，我使用ajax无限加载程序脚本。在加载帖子时，它显示的是这样加载gif：

但是我不想使用该gif。取而代之的是，我要使用浏览器的默认加载栏（在您请求的页面正在浏览器中加载时，您必须在地址栏中看到这些加载栏。我附加了该加载器以帮助您）。

编辑1：这是我正在使用的脚本（https://helplogger.blogspot.com/2016/09/load-more-blogger-posts-or-infinite-scrolling.html）的链接。您可以在脚本中轻松找到gif链接。而且我希望该gif替换为内置的chrome /任何浏览器加载程序。（因为我认为这会稍微减少博客时间。）

Answer 1

您可以在不使用图像的情况下制作类似的照片。您将需要CSS和html。

HTML

<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>

CSS

.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;
}
}

查看直播Example 您应该根据您的主题更改颜色 试试吧...

来源：https://www.cssscript.com/animated-google-loader-with-svg-and-css/