Skip to content

Instantly share code, notes, and snippets.

@kensnyder
Created February 23, 2021 00:45
Show Gist options
  • Save kensnyder/af70b09a253add864784c3fdd240e9f0 to your computer and use it in GitHub Desktop.
Save kensnyder/af70b09a253add864784c3fdd240e9f0 to your computer and use it in GitHub Desktop.
import React from 'react';
import PropTypes from 'prop-types';
/**
* A box with an animated dashed border, i.e. marching ants
*/
export default function MarchingAnts({
width,
height,
animationDuration = 300,
style = {},
className = '',
...moreProps
}) {
style.height = `${height}px`;
style.width = `${width}px`;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
preserveAspectRatio="none"
style={style}
className={`Component MarchingAnts ${className}`}
{...moreProps}
>
<style>
{`
rect {
fill: none;
stroke: #000;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
stroke-dasharray: 4px;
animation: stroke ${animationDuration}ms linear infinite;
shape-rendering: geometricPrecision;
stroke-dashoffset: 8px;
stroke-width: 2px;
}
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
`}
</style>
<rect width="40" height="40" />
</svg>
);
}
MarchingAnts.propTypes = {
/** The width in pixels */
width: PropTypes.number.isRequired,
/** The height in pixels */
height: PropTypes.number.isRequired,
/** Control the speed where lower numbers are faster */
animationDuration: PropTypes.number,
/** Additional styles to apply to this component */
style: PropTypes.object,
/** An additional className to apply to this component */
className: PropTypes.string,
/** Child elements */
children: PropTypes.node.isRequired,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment