Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shx-3d-render

main
Jan Umbach 2024-06-19 22:36:53 +02:00
parent bc289d78a3
commit c75bff104e
1 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
snippets/shx-loading-spinner.liquid
View File

@ -1,14 +1,59 @@
{% assign content_type = content_type | default: 'body' %}
{% assign content_type = content_type | default: 'body' %}
{% if content_type == 'body' %}
<div class="shx-loading-spinner-container">
{% render 'shx-logo', class_name:"shx-loading-spinner-mainIcon shx-loading-spinner-unclickable", width:"200px"%}
<p class="shx-loading-spinner-unclickable">Lade Vorschau</p>
</div>
<shx-loading-spinner/>
{% elsif content_type == 'head' %}
<script>
class InputFormsElement extends HTMLElement {
constructor() {
super();
this.container = null;
this.hideTimeout = null;
}
connectedCallback() {
this.innerHTML = `
<div class="shx-loading-spinner-container">
{% render 'shx-logo', class_name:"shx-loading-spinner-mainIcon shx-loading-spinner-unclickable", width:"200px"%}
<p class="shx-loading-spinner-unclickable">Lade Vorschau</p>
</div>
`;
this.container = this.querySelector('.shx-loading-spinner-container');
}
show() {
if(this.hideTimeout) {
clearTimeout(this.hideTimeout);
}
this.container.style.display = undefined;
setTimeout(() => {
this.container.classList.remove('shx-loading-spinner-container-done');
}, 0);
}
hide() {
this.container.classList.add('shx-loading-spinner-container-done');
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
}
this.hideTimeout = setTimeout(() => {
this.container.style.display = 'none';
}, 1000);
}
}
customElements.define('shx-loading-spinner', InputFormsElement);
</script>
<style>
@keyframes shx-spinner-pulse {
0% {