Files
wordpress-theme-aksrt/src/AKSRT/Frontend/LoadingOverlayRenderer.php
T
kate522 aaf458af1c refactor(autoload): migrate theme classes to Composer PSR-4
Move 288 types from global AKSRT_* + inc/classes manual requires into
namespace AKSRT\{Domain} under src/AKSRT/, wire composer.json psr-4,
and slim bootstrap to helpers/modules/hooks only. Split multi-class
widget/gateway files, update admin contract audit paths, and document
the layout in ADR/README.
2026-07-17 13:29:22 +08:00

67 lines
6.1 KiB
PHP

<?php
/**
* @package AKSRT
*/
namespace AKSRT\Frontend;
defined('ABSPATH') || exit;
class LoadingOverlayRenderer {
public function output(): void {
if (!class_exists('\AKSRT\Settings\Settings') || !\AKSRT\Settings\Settings::is_qj_loading_enabled()) {
return;
}
$style = \AKSRT\Settings\Settings::get_qj_loading_style();
?>
<style id="aksrt-loading-css">
.aksrt-loading-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:var(--bg-card,#fff);transition:opacity .4s ease,visibility .4s ease}
.aksrt-loading-overlay .loader{width:48px;height:48px;position:relative}
[data-loading-style="no1"] .loader{border:4px solid var(--color-primary-soft,rgba(240,68,148,.15));border-top-color:var(--color-primary,#f04494);border-radius:50%;animation:aksrt-load-spin .8s linear infinite}
[data-loading-style="no2"] .loader{border:4px solid var(--color-primary-soft,rgba(240,68,148,.15));border-radius:50%;animation:aksrt-load-pulse 1.2s ease-in-out infinite}
[data-loading-style="no3"] .loader::before,[data-loading-style="no3"] .loader::after{content:'';position:absolute;border-radius:50%;animation:aksrt-load-ripple 1.6s linear infinite;border:3px solid var(--color-primary,#f04494);inset:0}
[data-loading-style="no3"] .loader::after{animation-delay:-.8s}
[data-loading-style="no4"] .loader{display:flex;gap:6px;align-items:center;justify-content:center}
[data-loading-style="no4"] .loader::before,[data-loading-style="no4"] .loader::after,[data-loading-style="no4"] .loader i{width:12px;height:12px;border-radius:50%;background:var(--color-primary,#f04494);display:block;animation:aksrt-load-bounce .6s ease-in-out infinite alternate}
[data-loading-style="no4"] .loader::after{animation-delay:.2s}
[data-loading-style="no4"] .loader i{animation-delay:.4s}
[data-loading-style="no5"] .loader{background:var(--color-primary,#f04494);animation:aksrt-load-rotate-square 1.2s ease-in-out infinite}
[data-loading-style="no6"] .loader{width:60px;height:6px;border-radius:3px;background:var(--color-primary-soft,rgba(240,68,148,.15));overflow:hidden;position:relative}
[data-loading-style="no6"] .loader::after{content:'';position:absolute;left:-40%;top:0;width:40%;height:100%;background:var(--color-primary,#f04494);border-radius:3px;animation:aksrt-load-bar 1.2s ease-in-out infinite}
[data-loading-style="no7"] .loader{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
[data-loading-style="no7"] .loader i{width:12px;height:12px;background:var(--color-primary,#f04494);border-radius:2px;animation:aksrt-load-grid-fade 1s ease-in-out infinite}
[data-loading-style="no7"] .loader i:nth-child(1){animation-delay:0s}[data-loading-style="no7"] .loader i:nth-child(2){animation-delay:.1s}[data-loading-style="no7"] .loader i:nth-child(3){animation-delay:.2s}
[data-loading-style="no7"] .loader i:nth-child(4){animation-delay:.3s}[data-loading-style="no7"] .loader i:nth-child(5){animation-delay:.4s}[data-loading-style="no7"] .loader i:nth-child(6){animation-delay:.5s}
[data-loading-style="no7"] .loader i:nth-child(7){animation-delay:.6s}[data-loading-style="no7"] .loader i:nth-child(8){animation-delay:.7s}[data-loading-style="no7"] .loader i:nth-child(9){animation-delay:.8s}
[data-loading-style="no8"] .loader{display:flex;gap:5px;align-items:flex-end;height:40px}
[data-loading-style="no8"] .loader i{width:6px;background:var(--color-primary,#f04494);border-radius:2px;animation:aksrt-load-wave 1s ease-in-out infinite}
[data-loading-style="no8"] .loader i:nth-child(1){animation-delay:0s}[data-loading-style="no8"] .loader i:nth-child(2){animation-delay:.1s}[data-loading-style="no8"] .loader i:nth-child(3){animation-delay:.2s}
[data-loading-style="no8"] .loader i:nth-child(4){animation-delay:.3s}[data-loading-style="no8"] .loader i:nth-child(5){animation-delay:.4s}
[data-loading-style="no9"] .loader{display:flex;gap:8px;align-items:center;justify-content:center}
[data-loading-style="no9"] .loader i{width:10px;height:10px;background:var(--color-primary,#f04494);border-radius:50%;animation:aksrt-load-dot-scale .8s ease-in-out infinite alternate}
[data-loading-style="no9"] .loader i:nth-child(2){animation-delay:.15s}[data-loading-style="no9"] .loader i:nth-child(3){animation-delay:.3s}
[data-loading-style="no10"] .loader{border:4px solid transparent;border-top-color:var(--color-primary,#f04494);border-bottom-color:var(--color-primary,#f04494);border-radius:50%;animation:aksrt-load-spin 1s linear infinite}
[data-loading-style="no10"] .loader::after{content:'';position:absolute;inset:4px;border:4px solid transparent;border-left-color:var(--color-primary-soft,rgba(240,68,148,.35));border-right-color:var(--color-primary-soft,rgba(240,68,148,.35));border-radius:50%;animation:aksrt-load-spin .6s linear infinite reverse}
@keyframes aksrt-load-spin{to{transform:rotate(360deg)}}
@keyframes aksrt-load-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.5}}
@keyframes aksrt-load-ripple{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.2);opacity:0}}
@keyframes aksrt-load-bounce{to{transform:translateY(-12px);opacity:.5}}
@keyframes aksrt-load-rotate-square{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.6)}100%{transform:rotate(360deg) scale(1)}}
@keyframes aksrt-load-bar{0%{left:-40%}100%{left:100%}}
@keyframes aksrt-load-grid-fade{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes aksrt-load-wave{0%,100%{height:10px}50%{height:36px}}
@keyframes aksrt-load-dot-scale{from{transform:scale(1)}to{transform:scale(1.8);opacity:.4}}
body.aksrt-loading-done .aksrt-loading-overlay{opacity:0;visibility:hidden;pointer-events:none}
[data-theme="dark"] .aksrt-loading-overlay{background:var(--bg-card,#1a1a2e)}
</style>
<div class="aksrt-loading-overlay" data-loading-style="<?php echo esc_attr($style); ?>">
<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div>
<script>
(function(){function d(){document.body.classList.add('aksrt-loading-done')}if(document.readyState==='complete'){d()}else{window.addEventListener('load',d)}})();
</script>
<?php
}
}