sthag
7255b009b9
- Add loader element with progress display - Add styles for loader, spinner and bar - Move event listeners for hint to intro step - Add loadCore function to simulate loader - Keep alternative progress bar for document loading display
82 lines
No EOL
2 KiB
Text
82 lines
No EOL
2 KiB
Text
---
|
|
title: Init
|
|
tags:
|
|
- demoExample
|
|
- index
|
|
- ui
|
|
---
|
|
{% set pageId = "init" %}
|
|
{% set pageClass = "html_ui" %}
|
|
|
|
{% extends "demo/_app.njk" %}
|
|
|
|
{% block title %}{{ title }}
|
|
{% endblock %}
|
|
|
|
{% block links %}
|
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div id="loader" class="op_show">
|
|
<div id="bar">
|
|
<div id="spinner"><span>I</span></div>
|
|
<div id="wrap">
|
|
<div id="progress"></div>
|
|
</div>
|
|
<div id="status">0%</div>
|
|
</div>
|
|
</div>
|
|
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<p>Hold <kbd>space</kbd> to skip.</p>
|
|
</div>
|
|
<div id="intro" class="op_hide">
|
|
<div class="brand">
|
|
{# <img src="" alt="Brand logo"> #}
|
|
<svg
|
|
width="128"
|
|
height="128"
|
|
viewBox="0 0 128 128"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:svg="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<rect
|
|
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
|
|
width="126"
|
|
height="126"
|
|
x="1"
|
|
y="1" />
|
|
<circle
|
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
|
cx="64"
|
|
cy="64"
|
|
r="63" />
|
|
<path
|
|
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
|
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
|
|
</g>
|
|
</svg>
|
|
<h1>Brand name</h1>
|
|
</div>
|
|
<p>Powered by</p>
|
|
<ul class="tech-stack">
|
|
<li>Vendor</li>
|
|
<li>IDE</li>
|
|
<li>Engine</li>
|
|
</ul>
|
|
</div>
|
|
<div id="agreement" class="op_hide">
|
|
<div class="hello">Hello World!</div>
|
|
<p class="hello">Only left mouse click or any key</p>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
<script src="{{ pageBase }}js/ui.js"></script>
|
|
{% endblock %} |