600 West

Loader 

<svg class="Loader " width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="Loader-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
 
<svg class="Loader {{modifier}}" width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="Loader-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
 
{
  "id": null,
  "modifier": null,
  "style": null
}
  • Content: 
    import React from 'react';

const Loader = () => {
    return (
        <div style={{textAlign: 'center'}}>
            <svg className="Loader" width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle
                    className="Loader-path"
                    fill="none"
                    strokeWidth="6"
                    strokeLinecap="round"
                    cx="33"
                    cy="33"
                    r="30"
                />
            </svg>
        </div>
    );
};

export default Loader;
  • URL: /components/raw/loader/Loader.js
  • Filesystem Path: components/atoms/Loader/Loader.js
  • Size: 575 Bytes
  • Content: 
    $offset: 180;
$duration: 1.4s;

.Loader {
    animation: rotator $duration linear infinite;
    &-path {
        transform-origin: center;
        animation: dash $duration ease-in-out infinite;
        stroke: theme-color(primary);
        stroke-dasharray: $offset;
        stroke-dashoffset: 0;
    }

    @at-root {
        @keyframes rotator {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(270deg);
            }
        }

        @keyframes dash {
            0% {
                stroke-dashoffset: $offset;
            }
            50% {
                transform: rotate(135deg);
                stroke-dashoffset: $offset/4;
            }
            100% {
                transform: rotate(450deg);
                stroke-dashoffset: $offset;
            }
        }
    }
}
  • URL: /components/raw/loader/Loader.scss
  • Filesystem Path: components/atoms/Loader/Loader.scss
  • Size: 869 Bytes

Loader

The Loader component is a spinning circle used to indicate to users something is loading.

Best Practices

  • It should only be used within loading states.