Socket
Socket
Sign inDemoInstall

atomic-spinner

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

atomic-spinner - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.d.ts

3

dist/index.js

@@ -11,3 +11,2 @@ "use strict";

const React = __importStar(require("react"));
const getRandomElectronPathOrbitTime = () => 2 + Math.random() * 1;
function Nucleus({ particleFillColor, particleBorderColor, particleCount, particleSize, distanceFromCenter }) {

@@ -51,3 +50,3 @@ const startingAngle = Math.random() * 2 * Math.PI;

electronCount: electronsPerPath,
electronOrbitTime: getRandomElectronPathOrbitTime()
electronOrbitTime: 2 + Math.random() * 1
}));

@@ -54,0 +53,0 @@ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: atomSize, height: atomSize, viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid" },

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

"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});const React=__importStar(require("react")),getRandomElectronPathOrbitTime=()=>+Math.random()+2;function Nucleus({particleFillColor,particleBorderColor,particleCount,particleSize,distanceFromCenter}){const startingAngle=2*Math.random()*Math.PI;var particles=Array.from({length:particleCount}).map((_,i)=>{var angle=startingAngle+i*(2*Math.PI/particleCount),offsetX=distanceFromCenter*Math.cos(angle),angle=distanceFromCenter*Math.sin(angle);return React.createElement("g",{key:i},React.createElement("circle",{cx:50+offsetX,cy:50+angle,r:particleSize,fill:particleFillColor,stroke:particleBorderColor,strokeWidth:.3}))});return particles.sort(({key})=>Number(key)%(particleCount/3)?1:-1),React.createElement(React.Fragment,null,particles)}function ElectronPath({color,width,rotationAngle}){return React.createElement("g",{transform:`rotate(${rotationAngle} 50 50)`},React.createElement("use",{xlinkHref:"#electronPath",stroke:color,strokeWidth:width}))}function Electron({rotationAngle,orbitTime,spacetimeOffset,size,colorPalette}){let unusedColors=[];return React.createElement("g",{transform:`rotate(${rotationAngle} 50 50)`},React.createElement("circle",{cx:"50",cy:"15",r:size,fill:(unusedColors=unusedColors.length?unusedColors:[...colorPalette]).splice(Math.floor(Math.random()*unusedColors.length),1)[0]},React.createElement("animateMotion",{dur:orbitTime+"s",repeatCount:"indefinite",begin:spacetimeOffset+"s"},React.createElement("mpath",{xlinkHref:"#electron"}))))}function AtomicSpinner({atomSize=200,displayElectronPaths=!0,displayNucleus=!0,electronColorPalette=["#0081C9","#5BC0F8","#86E5FF"],electronPathCount=3,electronPathColor="#707070",electronPathWidth=.5,electronsPerPath=2,electronSize=1.5,nucleusParticleFillColor="#707070",nucleusParticleBorderColor="#999",nucleusParticleCount=6,nucleusParticleSize=2.5,nucleusDistanceFromCenter=2.5}){var electronPaths=Array.from({length:electronPathCount}).map((_,i)=>({rotationAngle:0+i*(180/electronPathCount),electronCount:electronsPerPath,electronOrbitTime:getRandomElectronPathOrbitTime()}));return React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:atomSize,height:atomSize,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},React.createElement("defs",null,React.createElement("path",{id:"electronPath",d:"M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15",fill:"none"}),React.createElement("path",{id:"electron",d:"M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0",fill:"none"})),displayNucleus&&React.createElement(Nucleus,{particleCount:nucleusParticleCount,particleSize:nucleusParticleSize,distanceFromCenter:nucleusDistanceFromCenter,particleFillColor:nucleusParticleFillColor,particleBorderColor:nucleusParticleBorderColor}),displayElectronPaths&&electronPaths.map(({rotationAngle})=>React.createElement(ElectronPath,{key:"electron-path-"+rotationAngle,color:electronPathColor,width:electronPathWidth,rotationAngle:rotationAngle})),electronPaths.map(({electronCount,rotationAngle,electronOrbitTime})=>Array.from({length:electronCount}).map((_,i)=>React.createElement(Electron,{key:"electron-"+i,rotationAngle:rotationAngle,orbitTime:electronOrbitTime,size:electronSize,spacetimeOffset:i*(electronOrbitTime/electronCount)-electronOrbitTime,colorPalette:electronColorPalette}))))}exports.Nucleus=Nucleus,exports.ElectronPath=ElectronPath,exports.Electron=Electron,exports.default=React.memo(AtomicSpinner);
"use strict";var __importStar=this&&this.__importStar||function(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result};Object.defineProperty(exports,"__esModule",{value:!0});const React=__importStar(require("react"));function Nucleus({particleFillColor,particleBorderColor,particleCount,particleSize,distanceFromCenter}){const startingAngle=2*Math.random()*Math.PI;var particles=Array.from({length:particleCount}).map((_,i)=>{var angle=startingAngle+i*(2*Math.PI/particleCount),offsetX=distanceFromCenter*Math.cos(angle),angle=distanceFromCenter*Math.sin(angle);return React.createElement("g",{key:i},React.createElement("circle",{cx:50+offsetX,cy:50+angle,r:particleSize,fill:particleFillColor,stroke:particleBorderColor,strokeWidth:.3}))});return particles.sort(({key})=>Number(key)%(particleCount/3)?1:-1),React.createElement(React.Fragment,null,particles)}function ElectronPath({color,width,rotationAngle}){return React.createElement("g",{transform:`rotate(${rotationAngle} 50 50)`},React.createElement("use",{xlinkHref:"#electronPath",stroke:color,strokeWidth:width}))}function Electron({rotationAngle,orbitTime,spacetimeOffset,size,colorPalette}){let unusedColors=[];return React.createElement("g",{transform:`rotate(${rotationAngle} 50 50)`},React.createElement("circle",{cx:"50",cy:"15",r:size,fill:(unusedColors=unusedColors.length?unusedColors:[...colorPalette]).splice(Math.floor(Math.random()*unusedColors.length),1)[0]},React.createElement("animateMotion",{dur:orbitTime+"s",repeatCount:"indefinite",begin:spacetimeOffset+"s"},React.createElement("mpath",{xlinkHref:"#electron"}))))}function AtomicSpinner({atomSize=200,displayElectronPaths=!0,displayNucleus=!0,electronColorPalette=["#0081C9","#5BC0F8","#86E5FF"],electronPathCount=3,electronPathColor="#707070",electronPathWidth=.5,electronsPerPath=2,electronSize=1.5,nucleusParticleFillColor="#707070",nucleusParticleBorderColor="#999",nucleusParticleCount=6,nucleusParticleSize=2.5,nucleusDistanceFromCenter=2.5}){var electronPaths=Array.from({length:electronPathCount}).map((_,i)=>({rotationAngle:0+i*(180/electronPathCount),electronCount:electronsPerPath,electronOrbitTime:+Math.random()+2}));return React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:atomSize,height:atomSize,viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},React.createElement("defs",null,React.createElement("path",{id:"electronPath",d:"M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15",fill:"none"}),React.createElement("path",{id:"electron",d:"M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0",fill:"none"})),displayNucleus&&React.createElement(Nucleus,{particleCount:nucleusParticleCount,particleSize:nucleusParticleSize,distanceFromCenter:nucleusDistanceFromCenter,particleFillColor:nucleusParticleFillColor,particleBorderColor:nucleusParticleBorderColor}),displayElectronPaths&&electronPaths.map(({rotationAngle})=>React.createElement(ElectronPath,{key:"electron-path-"+rotationAngle,color:electronPathColor,width:electronPathWidth,rotationAngle:rotationAngle})),electronPaths.map(({electronCount,rotationAngle,electronOrbitTime})=>Array.from({length:electronCount}).map((_,i)=>React.createElement(Electron,{key:"electron-"+i,rotationAngle:rotationAngle,orbitTime:electronOrbitTime,size:electronSize,spacetimeOffset:i*(electronOrbitTime/electronCount)-electronOrbitTime,colorPalette:electronColorPalette}))))}exports.Nucleus=Nucleus,exports.ElectronPath=ElectronPath,exports.Electron=Electron,exports.default=React.memo(AtomicSpinner);
{
"name": "atomic-spinner",
"version": "1.0.2",
"version": "1.0.3",
"description": "Loading spinner that looks like an atom",

@@ -5,0 +5,0 @@ "author": "David Lounsbrough",

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc