Widget:Timeline: Difference between revisions

Latest revision as of 19:56, 12 April 2026

Embed this on any page using: {{#widget:Timeline|start=2020|end=2025}}

@@ Line 1: / Line 1: @@
-<div id="timeline-window" style="width: 100%; height: 600px; position: relative; overflow: hidden; border: none;>
+<noinclude>
-    <div id="timeline-loader" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff9ed; z-index: 9999;">
+Embed this on any page using: <nowiki>{{#widget:Timeline|start=2020|end=2025}}</nowiki>
-        <div style="width: 50px; height: 50px; border: 5px solid #d1d5db; border-top-color: #1f2937; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+</noinclude>
-        <p style="margin-top: 15px; font-family: sans-serif; color: #1f2937; font-weight: bold;">Loading Lore Database...</p>
-        <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
-    </div>
-</div>
+<includeonly>
+<div id="timeline-window"
+     data-start="<!--{$start|default:''|escape:'html'}-->"
+     data-end="<!--{$end|default:''|escape:'html'}-->"
+     style="width: 100%; position: relative; overflow: visible; border: none; z-index: 10;"></div>
 <link rel="stylesheet" href="/assets/components/pixi-freeline/style.css">
@@ Line 19: / Line 21: @@
 <script type="module" src="/assets/components/pixi-freeline/main.js"></script>
+</includeonly>