Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add skeleton loading for the load more matches button

Browse source
This commit is contained in:
Valentin Kaelin 2019-10-21 17:50:13 +02:00
parent f13b044fc8
commit ee07c7bd0d
1 changed files with 68 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
client/src/components/SummonerLoader.vue
View file

@ -151,65 +151,75 @@
</div> </div>
<div class="mt-12 text-center"> <div class="mt-12 text-center">
<ul class="text-gray-900"> <div
<div v-for="index in 10"
v-for="index in 10" :key="index"
:key="index" class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
class="ml-10 mt-4 rounded-lg w-full bg-blue-800" style="width: 1160px; height: 144px;"
style="width: 1160px; height: 144px;" >
<content-loader
:height="144"
:width="1160"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
> >
<content-loader <rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
:height="144" <rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
:width="1160" <rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
:speed="2" <rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
primary-color="#17314f" <rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
secondary-color="#2b6cb0" <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="241" y="46" rx="3" ry="3" width="94.35" height="26.5" /> <rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" /> <rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" /> <rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" /> <rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" /> <rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" /> <rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" /> <rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" /> <rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" /> <rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" /> <rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" /> <rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" /> <rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" /> <circle cx="862" cy="32" r="12" />
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" /> <circle cx="862" cy="52" r="12" />
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" /> <circle cx="862" cy="72" r="12" />
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" /> <circle cx="862" cy="92" r="12" />
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" /> <circle cx="862" cy="112" r="12" />
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" /> <circle cx="926" cy="32" r="12" />
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" /> <circle cx="926" cy="52" r="12" />
<circle cx="862" cy="32" r="12" /> <circle cx="926" cy="72" r="12" />
<circle cx="862" cy="52" r="12" /> <circle cx="926" cy="92" r="12" />
<circle cx="862" cy="72" r="12" /> <circle cx="926" cy="112" r="12" />
<circle cx="862" cy="92" r="12" /> <rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
<circle cx="862" cy="112" r="12" /> <rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
<circle cx="926" cy="32" r="12" /> <rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
<circle cx="926" cy="52" r="12" /> <rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
<circle cx="926" cy="72" r="12" /> <rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="926" cy="92" r="12" /> <rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
<circle cx="926" cy="112" r="12" /> <rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" /> <rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" /> <circle cx="1106" cy="50.55" r="11.88" />
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" /> <rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" /> <rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" /> </content-loader>
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" /> </div>
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" /> </div>
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1106" cy="50.55" r="11.88" /> <div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" /> <content-loader
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" /> :height="40"
</content-loader> :width="135"
</div> :speed="2"
</ul> primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
</content-loader>
</div> </div>
</div> </div>
</template> </template>