CSS Shimmer Effect

[AgustinV08]

Currently i'm working an app that loads differents cards boxes at the very start of the app, i want to do a shimmer effect to show the list loading the data from the server

I tried this with CSS Keyframes

@keyframes placeholderShimmer
{
  0%
  {
    background-position: -468 0;
  }

  100%
  {
    background-position: 468 0;
  }
}

.shimmer
{
  background-color: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800 104;

  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

But Nativescript currently doesn't support to animate the background-position. Also tried to use the nativescript-shimmer package but didn't appear to work.

Are there any workarounds for this?

[overbost]

I made shimmer effect with transform animation.
Is not perfect but a good start. Of course is resource expensive rather webview or gif.

<template>

  <GridLayout rows="auto">
    <GridLayout rows="auto" columns="auto,*" margin="10">
      <Label col="0" row="0" class="img-big label-1"/>
      <StackLayout col="1" row="0">
        <Label class="label-2" horizontalAlignment="left" width="90%" height="30"/>
        <Label class="label-2" horizontalAlignment="left" width="60%" height="20"/>
        <Label class="label-2" horizontalAlignment="left" width="40%" height="20"/>
        <Label class="label-2" horizontalAlignment="left" width="30%" height="20"/>
      </StackLayout>
    </GridLayout>
    <Label class="shimmer" horizontalAlignment="left"/>
  </GridLayout>

</template>


<script lang="ts">
export default{

}
</script>


<style lang="scss" scoped>
@import '~/style/_variables.scss';

.img-big{
  margin: 5;
  border-radius: 10;
  min-width: 80;
}

.label-1, .label-2, .shimmer{
  margin: 5 10 5 10;
}
.label-1, .label-2{
  background-color: lightgray;
  opacity: 0.6;
}
.label-1{  border-radius: 10;  }
.label-2{  border-radius: 50%; }


@keyframes shimmer {
  0% { transform: translateX(0%); }
  100% { transform: translateX(500%); }
}
.ns-light .shimmer{
  background: linear-gradient(100deg, rgba(0,0,0,0) 0%, $background-light 50%, rgba(255,0,0,0) 100%);
}
.ns-dark .shimmer{
  background: linear-gradient(100deg, rgba(0,0,0,0) 0%, $background-dark 50%, rgba(255,0,0,0) 100%);
}
.shimmer {
  margin-left: -150;
  width: 40%;
  opacity: 0.6;
  animation-name: shimmer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}