Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/spinner.tsx

Created July 31, 2024 14:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jasesmith/f72e72eab3fa0aa589824d59c1c4e564 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jasesmith/f72e72eab3fa0aa589824d59c1c4e564 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jasesmith revised this gist Jul 31, 2024. 1 changed file with 23 additions and 1 deletion.
    24 changes: 23 additions & 1 deletion spinner.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,23 @@
    ‎‎​
    export const ArtSpinner = ({ name }: { name?: string }): React.JSX.Element => {
    const classes = {
    element: joinArray([
    'art-spinner',
    name && `art-${name}--spinner`,
    ]),
    circle: joinArray([
    'art-spinner--circle',
    name && `art-${name}--spinner-circle`,
    ]),
    progress: joinArray([
    'art-spinner--progress',
    name && `art-${name}--spinner-progress`,
    ]),
    }

    return (
    <svg className={classes.element} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path className={classes.circle} fill-rule="evenodd" clip-rule="evenodd" d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#E6E6E6" />
    <path className={classes.progress} fill-rule="evenodd" clip-rule="evenodd" d="M14 2C14 0.89543 14.8954 0 16 0C24.8366 0 32 7.16344 32 16C32 17.1046 31.1046 18 30 18C28.8954 18 28 17.1046 28 16C28 9.37258 22.6274 4 16 4C14.8954 4 14 3.10457 14 2Z" fill="#00AFF0" />
    </svg>
    )
    }
  2. jasesmith created this gist Jul 31, 2024.
    1 change: 1 addition & 0 deletions spinner.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​