Laravel 5.6 Blade 页面加载微调器

Question

我已经在 laravel 5.6 中完成了一个项目。然而，唯一缺少的是在页面之间切换时的加载动画微调器，它使 UI 看起来更好，并且用户了解正在加载内容。

我在公共(public)目录中有一个 loading.gif 图像，我想在页面加载之间使用它。我找不到任何关于此的教程或有用的资源。

谁能告诉我实现这个最简单的方法是什么，因为我需要将项目投入生产

提前致谢

Answer 1

将此代码放在您的布局文件中(例如 app.blade.php)，以便整个系统都可以访问它。

<div class="whole-page-overlay" id="whole_page_loader">
<img class="center-loader"  style="height:100px;" src="https://example.com/images/loader.gif"/>

CSS

.whole-page-overlay{
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  background: rgba(0,0,0,0.6);
  width: 100%;
  height: 100% !important;
  z-index: 1050;
  display: none;
}
.whole-page-overlay .center-loader{
  top: 50%;
  left: 52%;
  position: absolute;
  color: white;
}

这将覆盖整个页面，现在您可以使用#whole_page_loader 选择器隐藏/显示 div。