Supported shapes apart from <rect> and <circle>

[anandnkhl]

I've been trying other shapes like of svg, but that doesn't work as expected. Is there any way to create loaders like the image attached? (which won't be possible using simple )

[danilowoz]

Hey @anandnkhl You're able to use path element as children, either Native or web. Which environment are you using? Do you mind to paste here a snippet, then I can check it by myself

[anandnkhl]

import React from "react"
import ContentLoader from "react-content-loader"

const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={30}
    height={30}
    viewBox="0 0 30 30"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <path d="M 9.995 0.965 a 1 1 0 11.816 0 l 2.353 5.092 a 1 1 0 0.819 0.577 l 5.772 0.516 c 0.89 0.08 1.236 1.196 0.549 1.766 l -4.253 3.523 a 1 1 0 0 -0.335 1.002 l 1.248 5.259 c 0.2 0.845 -0.697 1.526 -1.457 1.105 l -5.12 -2.836 a 1 1 0 0 -0.969 0 L 5.3 19.805 c -0.76 0.421 -1.658 -0.26 -1.457 -1.105 l 1.248 -5.26 a 1 1 0 0 -0.335 -1 L 0.502 8.915 c -0.687 -0.57 -0.34 -1.687 0.55 -1.766 l 5.771 -0.516 a 1 1 0 0.819 -0.577 L 9.995 0.965 z" />
  </ContentLoader>
)

export default MyLoader

Intended output for this is a shimmering star, (as attached below). But nothing shows up in the output.

I have also attached this same path elsewhere and the intended star is visible on normal components, but not with 'react-content-loader'

[danilowoz]

Hey, I was able to create a star as path, check it out here: https://codesandbox.io/s/wizardly-meninsky-u72hb?file=/src/App.js

I guess you grabbed this bellow snippet from Create-content-loader using the upload tool, isn't right? Could you please past here the original SVG you had used to create the loading? Maybe there is a bug in the convertor SVG tool.

Thanks

[anandnkhl]

@danilowoz thanks a lot.

Here's the svg path I was entering in the custom code snippet @ https://skeletonreact.com/

<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.99527 0.964565C10.3529 0.19051 11.4531 0.190511 11.8108 0.964566L14.1641 6.05737C14.3142 6.38221 14.6264 6.60209 14.9828 6.63394L20.7549 7.14981C21.6443 7.2293 21.9915 8.34618 21.3038 8.9159L17.0506 12.4394C16.7576 12.6822 16.6277 13.0703 16.7156 13.4405L17.9642 18.6996C18.1649 19.5448 17.2665 20.2263 16.5066 19.8053L11.3877 16.9692C11.0862 16.8022 10.7199 16.8022 10.4184 16.9692L5.29945 19.8053C4.53956 20.2263 3.6412 19.5448 3.84187 18.6996L5.09047 13.4405C5.17837 13.0703 5.04852 12.6822 4.75548 12.4394L0.502296 8.9159C-0.185402 8.34618 0.16175 7.2293 1.05124 7.14981L6.82326 6.63394C7.17968 6.60209 7.49192 6.38221 7.64202 6.05737L9.99527 0.964565Z" fill="#F5F5F5"/>
</svg>