Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supported shapes apart from <rect> and <circle> #193

Open
anandnkhl opened this issue Aug 31, 2020 · 4 comments
Open

Supported shapes apart from <rect> and <circle> #193

anandnkhl opened this issue Aug 31, 2020 · 4 comments

Comments

@anandnkhl
Copy link
Contributor

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 )

image

@danilowoz
Copy link
Owner

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
Copy link
Contributor Author

anandnkhl commented Sep 2, 2020

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.
image

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

@danilowoz
Copy link
Owner

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
Copy link
Contributor Author

@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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants