Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

react-loader-spinner

Package Overview
Dependencies
Maintainers
1
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-loader-spinner - npm Package Compare versions

Comparing version 5.1.5-0 to 5.1.5

dist/esm/loader/CradleLoader.d.ts
dist/esm/loader/CradleLoader.js
dist/loader/CradleLoader.d.ts
dist/loader/CradleLoader.js
dist/loader/css/cradleLoader.css
dist/loader/css/plane.css
dist/loader/css/react-spinner-loader.css
dist/loader/css/triangle.css

6

dist/esm/index.d.ts

@@ -6,6 +6,5 @@ import Audio from './loader/Audio';

import CirclesWithBar from './loader/CirclesWithBar';
import FallingLines from './loader/FallingLines';
import CradleLoader from './loader/CradleLoader';
import Grid from './loader/Grid';
import Hearts from './loader/Hearts';
import InfinitySpin from './loader/InfinitySpin';
import LineWave from './loader/LineWave';

@@ -18,3 +17,2 @@ import MutatingDots from './loader/MutatingDots';

import Rings from './loader/Rings';
import RotatingLines from './loader/RotatingLines';
import RotatingSquare from './loader/RotatingSquare';

@@ -26,2 +24,2 @@ import TailSpin from './loader/TailSpin';

import Watch from './loader/Watch';
export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch, RotatingLines, FallingLines, InfinitySpin, };
export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

6

dist/esm/index.js

@@ -6,6 +6,5 @@ import Audio from './loader/Audio';

import CirclesWithBar from './loader/CirclesWithBar';
import FallingLines from './loader/FallingLines';
import CradleLoader from './loader/CradleLoader';
import Grid from './loader/Grid';
import Hearts from './loader/Hearts';
import InfinitySpin from './loader/InfinitySpin';
import LineWave from './loader/LineWave';

@@ -18,3 +17,2 @@ import MutatingDots from './loader/MutatingDots';

import Rings from './loader/Rings';
import RotatingLines from './loader/RotatingLines';
import RotatingSquare from './loader/RotatingSquare';

@@ -26,2 +24,2 @@ import TailSpin from './loader/TailSpin';

import Watch from './loader/Watch';
export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch, RotatingLines, FallingLines, InfinitySpin, };
export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

16

dist/esm/loader/Plane.js

@@ -1,5 +0,1 @@

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {

@@ -17,7 +13,2 @@ __assign = Object.assign || function(t) {

import React from 'react';
import styled, { keyframes } from 'styled-components';
var loaderSpin = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n transform: rotate(360deg);\n }\n"], ["\n to {\n transform: rotate(360deg);\n }\n"])));
var loaderPath = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n 50% {\n stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n }\n 100% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n"], ["\n 0% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n 50% {\n stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n }\n 100% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n"])));
var SVG = styled.svg.withConfig({ displayName: "SVG", componentId: "-18thdg0" })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 230px;\n height: 230px;\n transform-origin: 115px 115px;\n animation: 1.4s linear infinite ", ";\n -webkit-animation: 1.4s linear infinite ", ";\n"], ["\n width: 230px;\n height: 230px;\n transform-origin: 115px 115px;\n animation: 1.4s linear infinite ", ";\n -webkit-animation: 1.4s linear infinite ", ";\n"])), loaderSpin, loaderSpin);
var Path = styled.path.withConfig({ displayName: "Path", componentId: "-1ssm3dn" })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation: 1.4s ease-in-out infinite ", ";\n -webkit-animation: 1.4s ease-in-out infinite ", ";\n"], ["\n animation: 1.4s ease-in-out infinite ", ";\n -webkit-animation: 1.4s ease-in-out infinite ", ";\n"])), loaderPath, loaderPath);
var getDefaultStyle = function (visible) { return ({

@@ -29,8 +20,7 @@ display: visible ? 'flex' : 'none'

return (React.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "plane-loading" },
React.createElement(SVG, { xmlns: "http://www.w3.org/2000/svg", width: "230", height: "230", "aria-label": ariaLabel, "data-testid": "plane-svg" },
React.createElement("svg", { className: "react-spinner-loader-svg-calLoader", xmlns: "http://www.w3.org/2000/svg", width: "230", height: "230", "aria-label": ariaLabel, "data-testid": "plane-svg" },
React.createElement("desc", null, "Plane animation. Loading "),
React.createElement(Path, { style: { stroke: secondaryColor }, d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z", fill: "none", stroke: "#0099cc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "10 10 10 10 10 10 10 432", strokeDashoffset: "77" }),
React.createElement("path", { style: { fill: color }, d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z", fill: "#000033" }))));
React.createElement("path", { className: "react-spinner-loader-cal-loader__path", style: { stroke: secondaryColor }, d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z", fill: "none", stroke: "#0099cc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "10 10 10 10 10 10 10 432", strokeDashoffset: "77" }),
React.createElement("path", { className: "cal-loader__plane", style: { fill: color }, d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z", fill: "#000033" }))));
};
export default Plane;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

17

dist/esm/loader/Triangle.js

@@ -1,5 +0,1 @@

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {

@@ -17,16 +13,11 @@ __assign = Object.assign || function(t) {

import React from 'react';
import styled, { keyframes } from 'styled-components';
var dash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n stroke-dashoffset: 136;\n }\n"], ["\n to {\n stroke-dashoffset: 136;\n }\n"])));
var Polygon = styled.polygon.withConfig({ displayName: "Polygon", componentId: "-1mg6p6a" })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n stroke-dasharray: 17;\n animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"], ["\n stroke-dasharray: 17;\n animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"])), dash);
var SVG = styled.svg.withConfig({ displayName: "SVG", componentId: "-1kq0985" })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform-origin: 50% 65%;\n"], ["\n transform-origin: 50% 65%;\n"])));
var getDefaultStyle = function (visible) { return ({
display: visible ? 'flex' : 'none',
display: visible ? 'flex' : 'none'
}); };
var Triangle = function (_a) {
var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'triangle-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
return (React.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "".concat(wrapperClass), "data-testid": "triangle-loading" },
React.createElement(SVG, { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
React.createElement(Polygon, { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
return (React.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "react-spinner-loader-svg ".concat(wrapperClass), "data-testid": "triangle-loading" },
React.createElement("svg", { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
React.createElement("polygon", { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
};
export default Triangle;
var templateObject_1, templateObject_2, templateObject_3;

6

dist/index.d.ts

@@ -6,6 +6,5 @@ import Audio from './loader/Audio';

import CirclesWithBar from './loader/CirclesWithBar';
import FallingLines from './loader/FallingLines';
import CradleLoader from './loader/CradleLoader';
import Grid from './loader/Grid';
import Hearts from './loader/Hearts';
import InfinitySpin from './loader/InfinitySpin';
import LineWave from './loader/LineWave';

@@ -18,3 +17,2 @@ import MutatingDots from './loader/MutatingDots';

import Rings from './loader/Rings';
import RotatingLines from './loader/RotatingLines';
import RotatingSquare from './loader/RotatingSquare';

@@ -26,2 +24,2 @@ import TailSpin from './loader/TailSpin';

import Watch from './loader/Watch';
export { Audio, BallTriangle, Bars, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch, RotatingLines, FallingLines, InfinitySpin, };
export { Audio, BallTriangle, Bars, CradleLoader, Circles, CirclesWithBar, Grid, Hearts, LineWave, MutatingDots, Oval, Plane, Puff, RevolvingDot, RotatingSquare, Rings, TailSpin, ThreeDots, ThreeCircles, Triangle, Watch };

10

dist/index.js

@@ -6,3 +6,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.InfinitySpin = exports.FallingLines = exports.RotatingLines = exports.Watch = exports.Triangle = exports.ThreeCircles = exports.ThreeDots = exports.TailSpin = exports.Rings = exports.RotatingSquare = exports.RevolvingDot = exports.Puff = exports.Plane = exports.Oval = exports.MutatingDots = exports.LineWave = exports.Hearts = exports.Grid = exports.CirclesWithBar = exports.Circles = exports.Bars = exports.BallTriangle = exports.Audio = void 0;
exports.Watch = exports.Triangle = exports.ThreeCircles = exports.ThreeDots = exports.TailSpin = exports.Rings = exports.RotatingSquare = exports.RevolvingDot = exports.Puff = exports.Plane = exports.Oval = exports.MutatingDots = exports.LineWave = exports.Hearts = exports.Grid = exports.CirclesWithBar = exports.Circles = exports.CradleLoader = exports.Bars = exports.BallTriangle = exports.Audio = void 0;
var Audio_1 = __importDefault(require("./loader/Audio"));

@@ -18,4 +18,4 @@ exports.Audio = Audio_1.default;

exports.CirclesWithBar = CirclesWithBar_1.default;
var FallingLines_1 = __importDefault(require("./loader/FallingLines"));
exports.FallingLines = FallingLines_1.default;
var CradleLoader_1 = __importDefault(require("./loader/CradleLoader"));
exports.CradleLoader = CradleLoader_1.default;
var Grid_1 = __importDefault(require("./loader/Grid"));

@@ -25,4 +25,2 @@ exports.Grid = Grid_1.default;

exports.Hearts = Hearts_1.default;
var InfinitySpin_1 = __importDefault(require("./loader/InfinitySpin"));
exports.InfinitySpin = InfinitySpin_1.default;
var LineWave_1 = __importDefault(require("./loader/LineWave"));

@@ -42,4 +40,2 @@ exports.LineWave = LineWave_1.default;

exports.Rings = Rings_1.default;
var RotatingLines_1 = __importDefault(require("./loader/RotatingLines"));
exports.RotatingLines = RotatingLines_1.default;
var RotatingSquare_1 = __importDefault(require("./loader/RotatingSquare"));

@@ -46,0 +42,0 @@ exports.RotatingSquare = RotatingSquare_1.default;

35

dist/loader/Plane.js
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {

@@ -17,21 +13,2 @@ __assign = Object.assign || function(t) {

};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {

@@ -43,7 +20,2 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

var react_1 = __importDefault(require("react"));
var styled_components_1 = __importStar(require("styled-components"));
var loaderSpin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n transform: rotate(360deg);\n }\n"], ["\n to {\n transform: rotate(360deg);\n }\n"])));
var loaderPath = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n 50% {\n stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n }\n 100% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n"], ["\n 0% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n 50% {\n stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;\n }\n 100% {\n stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;\n }\n"])));
var SVG = styled_components_1.default.svg.withConfig({ displayName: "SVG", componentId: "-18thdg0" })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 230px;\n height: 230px;\n transform-origin: 115px 115px;\n animation: 1.4s linear infinite ", ";\n -webkit-animation: 1.4s linear infinite ", ";\n"], ["\n width: 230px;\n height: 230px;\n transform-origin: 115px 115px;\n animation: 1.4s linear infinite ", ";\n -webkit-animation: 1.4s linear infinite ", ";\n"])), loaderSpin, loaderSpin);
var Path = styled_components_1.default.path.withConfig({ displayName: "Path", componentId: "-1ssm3dn" })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n animation: 1.4s ease-in-out infinite ", ";\n -webkit-animation: 1.4s ease-in-out infinite ", ";\n"], ["\n animation: 1.4s ease-in-out infinite ", ";\n -webkit-animation: 1.4s ease-in-out infinite ", ";\n"])), loaderPath, loaderPath);
var getDefaultStyle = function (visible) { return ({

@@ -55,9 +27,8 @@ display: visible ? 'flex' : 'none'

return (react_1.default.createElement("div", { style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: wrapperClass, "data-testid": "plane-loading" },
react_1.default.createElement(SVG, { xmlns: "http://www.w3.org/2000/svg", width: "230", height: "230", "aria-label": ariaLabel, "data-testid": "plane-svg" },
react_1.default.createElement("svg", { className: "react-spinner-loader-svg-calLoader", xmlns: "http://www.w3.org/2000/svg", width: "230", height: "230", "aria-label": ariaLabel, "data-testid": "plane-svg" },
react_1.default.createElement("desc", null, "Plane animation. Loading "),
react_1.default.createElement(Path, { style: { stroke: secondaryColor }, d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z", fill: "none", stroke: "#0099cc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "10 10 10 10 10 10 10 432", strokeDashoffset: "77" }),
react_1.default.createElement("path", { style: { fill: color }, d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z", fill: "#000033" }))));
react_1.default.createElement("path", { className: "react-spinner-loader-cal-loader__path", style: { stroke: secondaryColor }, d: "M86.429 40c63.616-20.04 101.511 25.08 107.265 61.93 6.487 41.54-18.593 76.99-50.6 87.643-59.46 19.791-101.262-23.577-107.142-62.616C29.398 83.441 59.945 48.343 86.43 40z", fill: "none", stroke: "#0099cc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "10 10 10 10 10 10 10 432", strokeDashoffset: "77" }),
react_1.default.createElement("path", { className: "cal-loader__plane", style: { fill: color }, d: "M141.493 37.93c-1.087-.927-2.942-2.002-4.32-2.501-2.259-.824-3.252-.955-9.293-1.172-4.017-.146-5.197-.23-5.47-.37-.766-.407-1.526-1.448-7.114-9.773-4.8-7.145-5.344-7.914-6.327-8.976-1.214-1.306-1.396-1.378-3.79-1.473-1.036-.04-2-.043-2.153-.002-.353.1-.87.586-1 .952-.139.399-.076.71.431 2.22.241.72 1.029 3.386 1.742 5.918 1.644 5.844 2.378 8.343 2.863 9.705.206.601.33 1.1.275 1.125-.24.097-10.56 1.066-11.014 1.032a3.532 3.532 0 0 1-1.002-.276l-.487-.246-2.044-2.613c-2.234-2.87-2.228-2.864-3.35-3.309-.717-.287-2.82-.386-3.276-.163-.457.237-.727.644-.737 1.152-.018.39.167.805 1.916 4.373 1.06 2.166 1.964 4.083 1.998 4.27.04.179.004.521-.076.75-.093.228-1.109 2.064-2.269 4.088-1.921 3.34-2.11 3.711-2.123 4.107-.008.25.061.557.168.725.328.512.72.644 1.966.676 1.32.029 2.352-.236 3.05-.762.222-.171 1.275-1.313 2.412-2.611 1.918-2.185 2.048-2.32 2.45-2.505.241-.111.601-.232.82-.271.267-.058 2.213.201 5.912.8 3.036.48 5.525.894 5.518.914 0 .026-.121.306-.27.638-.54 1.198-1.515 3.842-3.35 9.021-1.029 2.913-2.107 5.897-2.4 6.62-.703 1.748-.725 1.833-.594 2.286.137.46.45.833.872 1.012.41.177 3.823.24 4.37.085.852-.25 1.44-.688 2.312-1.724 1.166-1.39 3.169-3.948 6.771-8.661 5.8-7.583 6.561-8.49 7.387-8.702.233-.065 2.828-.056 5.784.011 5.827.138 6.64.09 8.62-.5 2.24-.67 4.035-1.65 5.517-3.016 1.136-1.054 1.135-1.014.207-1.962-.357-.38-.767-.777-.902-.893z", fill: "#000033" }))));
};
exports.Plane = Plane;
exports.default = exports.Plane;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

36

dist/loader/Triangle.js
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {

@@ -17,21 +13,2 @@ __assign = Object.assign || function(t) {

};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {

@@ -42,16 +19,11 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

var react_1 = __importDefault(require("react"));
var styled_components_1 = __importStar(require("styled-components"));
var dash = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to {\n stroke-dashoffset: 136;\n }\n"], ["\n to {\n stroke-dashoffset: 136;\n }\n"])));
var Polygon = styled_components_1.default.polygon.withConfig({ displayName: "Polygon", componentId: "-1mg6p6a" })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n stroke-dasharray: 17;\n animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"], ["\n stroke-dasharray: 17;\n animation: ", " 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;\n"])), dash);
var SVG = styled_components_1.default.svg.withConfig({ displayName: "SVG", componentId: "-1kq0985" })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n transform-origin: 50% 65%;\n"], ["\n transform-origin: 50% 65%;\n"])));
var getDefaultStyle = function (visible) { return ({
display: visible ? 'flex' : 'none',
display: visible ? 'flex' : 'none'
}); };
var Triangle = function (_a) {
var _b = _a.height, height = _b === void 0 ? 80 : _b, _c = _a.width, width = _c === void 0 ? 80 : _c, _d = _a.color, color = _d === void 0 ? 'green' : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? 'triangle-loading' : _e, wrapperStyle = _a.wrapperStyle, wrapperClass = _a.wrapperClass, _f = _a.visible, visible = _f === void 0 ? true : _f;
return (react_1.default.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "".concat(wrapperClass), "data-testid": "triangle-loading" },
react_1.default.createElement(SVG, { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
react_1.default.createElement(Polygon, { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
return (react_1.default.createElement("div", { role: "presentation", style: __assign(__assign({}, getDefaultStyle(visible)), wrapperStyle), className: "react-spinner-loader-svg ".concat(wrapperClass), "data-testid": "triangle-loading" },
react_1.default.createElement("svg", { id: "triangle", width: width, height: height, viewBox: "-3 -4 39 39", "aria-label": ariaLabel, "data-testid": "triangle-svg" },
react_1.default.createElement("polygon", { fill: "transparent", stroke: color, strokeWidth: "1", points: "16,0 32,32 0,32" }))));
};
exports.default = Triangle;
var templateObject_1, templateObject_2, templateObject_3;

30

package.json
{
"name": "react-loader-spinner",
"version": "5.1.5-0",
"version": "5.1.5",
"description": " react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.",

@@ -13,3 +13,7 @@ "unpkg": "dist/index.js",

"import": "./dist/esm/index.js"
}
},
"./dist/loader/css/react-spinner-loader.css": "./dist/loader/css/react-spinner-loader.css",
"./dist/loader/css/cradleLoader.css": "./dist/loader/css/cradleLoader.css",
"./dist/loader/css/plane.css": "./dist/loader/css/plane.css",
"./dist/loader/css/triangle.css": "./dist/loader/css/triangle.css"
},

@@ -34,6 +38,6 @@ "types": "dist/index.d.ts",

"build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy-files",
"build:esm": "ttsc --module es6 --outdir ./dist/esm/",
"build:cjs": "ttsc --module commonjs --outdir ./dist/",
"build:watch": "ttsc --watch",
"typecheck": "ttsc --noEmit --skipLibCheck",
"build:esm": "tsc --module es6 --outdir ./dist/esm/",
"build:cjs": "tsc --module commonjs --outdir ./dist/",
"build:watch": "tsc --watch",
"typecheck": "tsc --noEmit --skipLibCheck",
"lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",

@@ -55,3 +59,2 @@ "clean": "rimraf dist/",

"@types/react-dom": "^17.0.11",
"@types/styled-components": "^5.1.21",
"@types/testing-library__jest-dom": "^5.14.2",

@@ -72,3 +75,2 @@ "@types/testing-library__react": "^10.2.0",

"jest": "^27.4.5",
"jest-styled-components": "^7.0.8",
"react": "16.8.0",

@@ -78,14 +80,8 @@ "react-dom": "16.8.0",

"ts-jest": "^27.1.2",
"typescript": "^4.5.4",
"typescript-plugin-styled-components": "^2.0.0"
"typescript": "^4.5.4"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0",
"react-dom": "^16.0.0 || ^17.0.0"
},
"dependencies": {
"styled-components": "^5.3.3",
"styled-tools": "^1.7.2",
"ttypescript": "^1.5.13"
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
}

50

README.md

@@ -20,22 +20,29 @@ ![Node.js Package](https://github.com/mhnpd/react-loader-spinner/workflows/Node.js%20Package/badge.svg?branch=master)

```sh
$ npm install react-loader-spinner --save
```bash
npm install react-loader-spinner --save
# or
yarn add react-loader-spinner
```
### Documentation:
1. [Docs](https://mhnpd.github.io/react-loader-spinner-example/)
2. [Code SandBox](https://codesandbox.io/s/react-loader-spinner-weqls?file=/src/App.js)
# Documentation:
[DEMO](https://mhnpd.github.io/react-loader-spinner-example/)
### Usage
# Code SandBox:
https://codesandbox.io/s/react-loader-spinner-weqls?file=/src/App.js
##### Import required css
Import the css to main app.js file
### Usage
```js
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
```
##### Import required css
Import the css to main app.js file
```jsx
import { Audio } from 'react-loader-spinner'
<Audio

@@ -47,9 +54,29 @@ height="100"

/>
```
### If webpack throws issue with css. (For older version of this package)
Change webpack config as:
` test: /\.scss$/ to test: /\.s?css$/`
<br/><br/>
<small>Newer version just import css file from node modules to app.js<small>
### Types of Spinner
![alt text](https://user-images.githubusercontent.com/33191954/148691173-a825d830-9457-4174-9b74-5c2a264906e4.gif)
react-loader-spinner component has the following types of spinners.
| Spinner Type | Implementation |
| ------------ |-------------------------------------------------------------------------------|
| Audio | `<Audio color="#00BFFF" height={80} width={80} />` |
| BallTriangle | `<BallTriangle color="#00BFFF" height={80} width={80} />` |
| Bars | `<Bars color="#00BFFF" height={80} width={80} />` |
| Circles | `<Circles color="#00BFFF" height={80} width={80}/>` |
| Grid | `<Grid color="#00BFFF" height={80} width={80} />` |
| Hearts | `<Hearts color="#00BFFF" height={80} width={80} />` |
| Oval | `<Oval color="#00BFFF" height={80} width={80} />` |
| Puff | `<Puff color="#00BFFF" height={80} width={80} />` |
| Rings | `<Rings color="#00BFFF" height={80} width={80} />` |
| TailSpin | `<TailSpin color="#00BFFF" height={80} width={80} />` |
| ThreeDots | `<ThreeDots color="#00BFFF" height={80} width={80} />` |
### Here are the list of the task for which we want PR:

@@ -62,2 +89,1 @@

MIT
```
dist/esm/loader/FallingLines.d.ts
dist/esm/loader/FallingLines.js
dist/esm/loader/InfinitySpin.d.ts
dist/esm/loader/InfinitySpin.js
dist/esm/loader/RotatingLines.d.ts
dist/esm/loader/RotatingLines.js
dist/loader/FallingLines.d.ts
dist/loader/FallingLines.js
dist/loader/InfinitySpin.d.ts
dist/loader/InfinitySpin.js
dist/loader/RotatingLines.d.ts
dist/loader/RotatingLines.js
.eslintignore

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc