Backup #987

Dateiinhalt

<?php
/**
 * Generating Progress Partial (HTMX Polling)
 *
 * @var int $orderId Order ID for polling
 */
?>
<div class="generating-container"
     hx-get="/content/<?= $orderId ?>/generation-status"
     hx-trigger="load delay:1s"
     hx-swap="outerHTML">
    <div class="generating-spinner">
        <span class="generating-dot"></span>
        <span class="generating-dot"></span>
        <span class="generating-dot"></span>
    </div>
    <span class="generating-text">Content wird generiert...</span>
</div>

<style>
.generating-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-muted);
    border-radius: 8px;
    margin: var(--space-md) 0;
}

.generating-spinner {
    display: inline-flex;
    gap: 4px;
}

.generating-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: generating-bounce 1.4s infinite ease-in-out both;
}

.generating-dot:nth-child(1) { animation-delay: -0.32s; }
.generating-dot:nth-child(2) { animation-delay: -0.16s; }
.generating-dot:nth-child(3) { animation-delay: 0s; }

@keyframes generating-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.generating-text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
</style>

Vollständig herunterladen

Aktionen

Andere Versionen dieser Datei

← Zurück zur Übersicht