44 lines
692 B
Vue
44 lines
692 B
Vue
<style scoped lang="scss">
|
|
.shimmer {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.stroke {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #777;
|
|
}
|
|
|
|
.dark .animate {
|
|
animation: shimmer 3s infinite;
|
|
background: linear-gradient(90deg, #ffffff10 25%, #ffffff30 50%, #ffffff10 75%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
.animate {
|
|
animation: shimmer 3s infinite;
|
|
background: linear-gradient(to right, #e6e6e6 0%, #cccccc 50%, #e6e6e6 100%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
from {
|
|
background-position: 200% 0;
|
|
}
|
|
to {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div class="shimmer">
|
|
<div class="stroke animate"></div>
|
|
</div>
|
|
</template>
|