mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 12:57:28 +00:00
feat: add skeleton loading for the load more matches button
This commit is contained in:
Valentin Kaelin
parent
f13b044fc8
commit
ee07c7bd0d
1 changed files with 68 additions and 58 deletions
|
|
@ -151,65 +151,75 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<ul class="text-gray-900">
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
||||
style="width: 1160px; height: 144px;"
|
||||
<div
|
||||
v-for="index in 10"
|
||||
:key="index"
|
||||
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
|
||||
style="width: 1160px; height: 144px;"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="1160"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<content-loader
|
||||
:height="144"
|
||||
:width="1160"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
|
||||
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
|
||||
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
|
||||
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
|
||||
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
|
||||
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
|
||||
<circle cx="862" cy="32" r="12" />
|
||||
<circle cx="862" cy="52" r="12" />
|
||||
<circle cx="862" cy="72" r="12" />
|
||||
<circle cx="862" cy="92" r="12" />
|
||||
<circle cx="862" cy="112" r="12" />
|
||||
<circle cx="926" cy="32" r="12" />
|
||||
<circle cx="926" cy="52" r="12" />
|
||||
<circle cx="926" cy="72" r="12" />
|
||||
<circle cx="926" cy="92" r="12" />
|
||||
<circle cx="926" cy="112" r="12" />
|
||||
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="1106" cy="50.55" r="11.88" />
|
||||
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</ul>
|
||||
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
|
||||
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
|
||||
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
|
||||
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
|
||||
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
|
||||
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
|
||||
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
|
||||
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
|
||||
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
|
||||
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
|
||||
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
|
||||
<circle cx="862" cy="32" r="12" />
|
||||
<circle cx="862" cy="52" r="12" />
|
||||
<circle cx="862" cy="72" r="12" />
|
||||
<circle cx="862" cy="92" r="12" />
|
||||
<circle cx="862" cy="112" r="12" />
|
||||
<circle cx="926" cy="32" r="12" />
|
||||
<circle cx="926" cy="52" r="12" />
|
||||
<circle cx="926" cy="72" r="12" />
|
||||
<circle cx="926" cy="92" r="12" />
|
||||
<circle cx="926" cy="112" r="12" />
|
||||
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
|
||||
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
|
||||
<circle cx="1106" cy="50.55" r="11.88" />
|
||||
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
|
||||
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
|
||||
<content-loader
|
||||
:height="40"
|
||||
:width="135"
|
||||
:speed="2"
|
||||
primary-color="#17314f"
|
||||
secondary-color="#2b6cb0"
|
||||
>
|
||||
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
|
||||
</content-loader>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue