MarchingAnts.js

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,
};