background: #000
min-height: 100%
+@keyframes loader-spin
+ 0%
+ transform: rotate(0deg)
+ 100%
+ transform: rotate(360deg)
+
+#loader
+ position: fixed
+ top: 0
+ left: 0
+ width: 100%
+ height: 100%
+ cursor: wait
+ z-index: 10000000
+ display: none
+
+ svg
+ position: absolute
+ width: 48px
+ height: 48px
+ top: calc(50% - 24px)
+ left: calc(50% - 24px)
+ color: var(--theme-color)
+
+ &.show
+ display: block
+
+ svg
+ animation-name: loader-spin
+ animation-duration: 1s
+ animation-iteration-count: infinite
+ animation-timing-function: linear
+
main
padding: 20px 14px
min-height: 100%
$('body').addClass('init');
});
-setInterval(function () {
- $('body').addClass('init');
-}, 2000);
$(function () {
$('body').addClass('init');
});
$(window).on('beforeunload', function () {
- $('body').removeClass('init');
+ $('#loader').addClass('show');
+ setTimeout(function(){
+ $('#loader').removeClass('show');
+ },5000);
});
+// $(window).on('pagehide,unload', function () {
+// $('#loader').removeClass('show');
+// });
+
function updateSongView() {
try {
@else
@include('menu')
@endif
-<!DOCTYPE html>
+ <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<style>
- body {
- --theme-color: {{$collection->theme_color}};
- --plyr-color-main: {{$collection->theme_color}};
- }
+ body {
+ --theme-color: {{$collection->theme_color}};
+ --plyr-color-main: {{$collection->theme_color}};
+ }
</style>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link rel="manifest" href="/{{$collection->slug}}.webmanifest">
<path fill="currentColor" d="M113.956,57.006l-97.4-56.2c-4-2.3-9,0.6-9,5.2v112.5c0,4.6,5,7.5,9,5.2l97.4-56.2
C117.956,65.105,117.956,59.306,113.956,57.006z"/>
</symbol>
+ <symbol id="interface-loader" viewBox="0 0 48 48">
+ <circle cx="24" cy="24" r="23"></circle>
+ <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16"
+ stroke-dasharray="80 80"
+ transform="rotate(0 24 24)">
+ </circle>
+ </symbol>
</svg>
+<div id="loader">
+<svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="23"></circle>
+ <circle class="animate" cx="24" cy="24" fill="none" stroke="currentColor" stroke-width="3" r="16"
+ stroke-dasharray="80 80"
+ transform="rotate(0 24 24)">
+ </circle></svg>
+</div>
<main class="content page" id="page">
@yield('content')
</main>
projects / songbook.git / commitdiff