如何通过反应加载骨架为骨架制作边界半径？

Question

I need to create Skeleton using react-loading-skeleton library. One of 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 posibility of upgrade)

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

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

Answer 1

Use a wrapper like this :

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

JSX:

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

CodeSandbox here