AzuTear
81 lines
4.2 KiB
Vue
81 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import './cinematicStarLoader.css'
|
|
|
|
withDefaults(defineProps<{
|
|
eyebrow?: string
|
|
title: string
|
|
text?: string
|
|
outroText?: string
|
|
}>(), {
|
|
eyebrow: 'VTuber Star Award',
|
|
text: '',
|
|
outroText: 'Sterne am Himmel gefunden und Erfolgreich verknüpft.',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="loader">
|
|
<div class="loader__nebula loader__nebula--violet"></div>
|
|
<div class="loader__nebula loader__nebula--rose"></div>
|
|
<div class="loader__nebula loader__nebula--gold"></div>
|
|
<div class="loader__vignette"></div>
|
|
<div class="loader__starfield loader__starfield--far"></div>
|
|
<div class="loader__starfield loader__starfield--mid"></div>
|
|
<div class="loader__starfield loader__starfield--near"></div>
|
|
<div class="loader__constellation" aria-hidden="true">
|
|
<span class="constellation-star constellation-star--1">✦</span>
|
|
<span class="constellation-star constellation-star--2">✧</span>
|
|
<span class="constellation-star constellation-star--3">★</span>
|
|
<span class="constellation-star constellation-star--4">✦</span>
|
|
<span class="constellation-star constellation-star--5">✧</span>
|
|
<span class="constellation-star constellation-star--6">★</span>
|
|
</div>
|
|
<div class="loader__scene">
|
|
<div class="loader__tableau" aria-hidden="true">
|
|
<div class="loader__aurora loader__aurora--violet"></div>
|
|
<div class="loader__aurora loader__aurora--peach"></div>
|
|
<div class="loader__hanger loader__hanger--left">
|
|
<span class="loader__thread"></span>
|
|
<span class="loader__charm loader__charm--star">✦</span>
|
|
</div>
|
|
<div class="loader__hanger loader__hanger--center">
|
|
<span class="loader__thread"></span>
|
|
<span class="loader__charm loader__charm--moon">☾</span>
|
|
</div>
|
|
<div class="loader__hanger loader__hanger--right">
|
|
<span class="loader__thread"></span>
|
|
<span class="loader__charm loader__charm--spark">✧</span>
|
|
</div>
|
|
<div class="loader__mist loader__mist--left"></div>
|
|
<div class="loader__mist loader__mist--center"></div>
|
|
<div class="loader__mist loader__mist--right"></div>
|
|
<div class="loader__dissolve" aria-hidden="true">
|
|
<svg class="loader__dissolve-lines" viewBox="0 0 340 230" role="presentation" focusable="false">
|
|
<line class="loader__dissolve-line loader__dissolve-line--one" x1="55" y1="63" x2="160" y2="40" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--two" x1="160" y1="40" x2="290" y2="80" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--three" x1="55" y1="63" x2="87" y2="155" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--four" x1="87" y1="155" x2="195" y2="137" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--five" x1="195" y1="137" x2="297" y2="193" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--six" x1="195" y1="137" x2="223" y2="213" pathLength="1" />
|
|
<line class="loader__dissolve-line loader__dissolve-line--seven" x1="87" y1="155" x2="41" y2="205" pathLength="1" />
|
|
</svg>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--one"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--two"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--three"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--four"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--five"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--six"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--seven"></span>
|
|
<span class="loader__dissolve-dot loader__dissolve-dot--eight"></span>
|
|
</div>
|
|
</div>
|
|
<div class="loader__copy">
|
|
<div class="loader__eyebrow">{{ eyebrow }}</div>
|
|
<h1 class="loader__title">{{ title }}</h1>
|
|
<p v-if="text" class="loader__text">{{ text }}</p>
|
|
<p class="loader__outro-text">{{ outroText }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|