react-preloader-icon/esm/loaders/Oval.js

SVG loading icons component for React.

import React, { useEffect, useMemo, useRef } from 'react';
import loop from '../utils/loop';
function useRotate(duration) {
    var ref = useRef();
    useEffect(function () {
        var element = ref.current;
        return loop({
            duration: duration,
            update: function (n) {
                element.setAttribute('transform', "rotate(" + n * 360 + ")");
            },
        });
    }, [duration]);
    return ref;
}
var Oval = function (_a) {
    var strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, duration = _a.duration;
    var radius = useMemo(function () { return 50 - strokeWidth / 2; }, [strokeWidth]);
    var pathRef = useRotate(duration);
    return (React.createElement("div", { className: "preloader-icon__oval" },
        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-50 -50 100 100" },
            React.createElement("g", { fill: "none", strokeWidth: strokeWidth, stroke: strokeColor },
                React.createElement("circle", { strokeOpacity: ".5", r: radius }),
                React.createElement("path", { 
                    // @ts-ignore
                    ref: pathRef, d: "M0,-" + radius + " a" + radius + "," + radius + " 0 0,1 " + radius + "," + radius, strokeWidth: strokeWidth, stroke: strokeColor })))));
};
export default Oval;