Skeleton view animation gets frozen

49 Views Asked by At

I am using a skeleton view built with pure CSS. The problem I am facing is that when the data from the API is large or needs some operations to modify, the animation in the skeleton view gets frozen during these times. What measures should I take so that the animation does not get frozen? Here is the CSS part

.profile-image {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(0, 0, 0, .12);
  animation: image-skeleton 0.7s infinite linear;
  background: #e7edf1 linear-gradient(to right, #e7edf1 0%, #f2f3f5 20%, #e7edf1 40%, #e7edf1 100%) no-repeat;
}

@keyframes image-skeleton {
  0% {
    background-position: -100px;
  }
  100% {
    background-position: 120px;
  }
}

0

There are 0 best solutions below