How to make a border-radius for Skeleton by react-loading-skeleton?

Question

I need to create Skeleton using the react-loading-skeleton library. One item should have border radius like at the picture below.

Do you know how to make it?

My lib version: "react-loading-skeleton": "1.2.0" (low possibility of upgrade)

I tried to solve it in this way, but it doesn't work :(

<Skeleton
    width={127}
    borderRadius={12.5}
/>

Add a wrapper to your Skeleton like in the documentation : https://github.com/dvtng/react-loading-skeleton#custom-wrapper Use css border-radius and maybe overflow hidden if necessary. — Sephyre, Nov 16 '21 at 12:02

score 0 · Answer 1 · answered Nov 16 '21 at 12:49

0

Use a wrapper like this :

.rounded-skeleton {
  border-radius: 200px;
  overflow: hidden;
}

JSX:

  <div className="rounded-skeleton">
    <Skeleton />
  </div>

answered Nov 16 '21 at 12:49

Sephyre

1 Answers1