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
LeagueStats/client/src/components/SummonerLoader.vue
Valentin Kaelin bd1341fb7a feat: add skeleton loading to summoners page
2019-10-11 21:43:02 +02:00

274 lines
14 KiB
Vue
Raw Blame History

<template>
<div class="mt-4 container mx-auto text-white pb-12">
<div class="flex justify-between xl:px-12">
<div style="width: 517px; height: 272px;">
<content-loader
:height="272"
:width="517"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="2" y="23" rx="3" ry="3" width="164" height="31" />
<circle cx="49" cy="121" r="48" />
<rect x="119" y="75" rx="3" ry="3" width="123" height="31" />
<rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
<rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
<rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
<rect x="309" y="186" rx="3" ry="3" width="75" height="19" />
<rect x="426" y="186" rx="3" ry="3" width="75" height="19" />
<rect x="310" y="213" rx="3" ry="3" width="75" height="10" />
<rect x="320" y="231" rx="3" ry="3" width="65" height="10" />
<rect x="436" y="213" rx="3" ry="3" width="65" height="10" />
</content-loader>
</div>
<div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
<content-loader
:height="210"
:width="351"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
<rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
<rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
</content-loader>
</div>
</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: 1240px; height: 144px;"
>
<content-loader
:height="144"
:width="1240"
: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="37" rx="8" ry="8" width="64" height="64" />
<rect x="142" y="41" rx="6" ry="6" width="24" height="24" />
<rect x="142" y="73" rx="6" ry="6" width="24" height="24" />
<rect x="424" y="37" rx="6" ry="6" width="32" height="32" />
<rect x="460" y="37" rx="6" ry="6" width="32" height="32" />
<rect x="496" y="37" rx="6" ry="6" width="32" height="32" />
<rect x="424" y="73" rx="6" ry="6" width="32" height="32" />
<rect x="460" y="73" rx="6" ry="6" width="32" height="32" />
<rect x="496" y="73" rx="6" ry="6" width="32" height="32" />
<rect x="580" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="580" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="580" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="580" y="95" rx="3" ry="3" width="131" height="13" />
<circle cx="916" cy="33" r="12" />
<circle cx="916" cy="53" r="12" />
<circle cx="916" cy="73" r="12" />
<circle cx="916" cy="93" r="12" />
<circle cx="916" cy="113" r="12" />
<circle cx="980" cy="33" r="12" />
<circle cx="980" cy="53" r="12" />
<circle cx="980" cy="73" r="12" />
<circle cx="980" cy="93" r="12" />
<circle cx="980" cy="113" r="12" />
<rect x="827" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="827" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="997" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1188.58" cy="50.55" r="11.88" />
<rect x="1156" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="1158" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader>
</div>
</ul>
</div>
</div>
</template>
<script>
import { ContentLoader } from 'vue-content-loader'
export default {
components: {
ContentLoader
}
}
</script>
<style scoped>
.match-loading {
height: 144px;
}
/* LOADER */
.loader {
position: relative;
overflow: hidden;
background-size: 100vw 296px;
/* background-image: linear-gradient(120deg, #EBEBEB 20%, #F8F8F8 28%, #EBEBEB 43%); */
background-image: linear-gradient(
120deg,
#2c5282 20%,
#2b6cb0 28%,
#2c5282 43%
);
animation-name: loadingAnimation;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-duration: 2s;
}
@keyframes loadingAnimation {
from {
background-position: -100vw 0px;
}
to {
background-position: 100vw 0px;
}
}
/* Items inside loader */
.loader .item {
position: absolute;
background: #17314f;
}
.loader .item-1 {
left: 12px;
top: 0;
width: 10px;
height: 100%;
}
</style>
Reference in a new issue View git blame Copy permalink