![](\"../assets/browsers.png\")
\n\n![](\"assets/browsers.svg\")
\n
\n\n\n\n\n\n\n\n"
},
{
"path": "site/index.js",
"content": "import { Spinner } from \"../spin.js\";\n\nvar inputs = document.querySelectorAll('#opts input[type=\"range\"], #opts input[type=\"color\"], #opts input[type=\"text\"], #opts select');\nvar cbInputs = document.querySelectorAll('#opts input[type=\"checkbox\"]');\nvar spinnerEl = document.getElementById('preview');\nvar shareEl = document.getElementById('share');\nvar spinner;\nvar params = {};\nvar hash = /^#\\?(.*)/.exec(location.hash);\n\nif (hash) {\n shareEl.checked = true;\n\n hash[1].split(/&/).forEach(function (pair) {\n var kv = pair.split(/=/);\n params[kv[0]] = decodeURIComponent(kv[kv.length - 1]);\n });\n}\n\nfor (var i = 0; i < inputs.length; i++) {\n var input = inputs[i];\n var val = params[input.name];\n\n if (val !== undefined) {\n input.value = val;\n }\n\n if (input.tagName === 'SELECT' || navigator.userAgent.indexOf('Trident') !== -1) {\n // \"input\" event doesn't work on range inputs in Internet Explorer\n var event = 'change';\n } else {\n event = 'input';\n }\n\n input.addEventListener(event, update);\n}\n\nfor (var i = 0; i < cbInputs.length; i++) {\n var input = cbInputs[i];\n input.checked = !!params[input.name];\n input.addEventListener('click', update);\n}\n\nshareEl.addEventListener('click', function () {\n var value = '#!';\n\n if (shareEl.checked) {\n var opts = getOptionsFromInputs();\n value = '#?' + getParamStringFromOpts(opts);\n }\n\n window.location.replace(value);\n});\n\nupdate();\n\nfunction update() {\n var opts = getOptionsFromInputs();\n\n if (spinner) {\n spinner.stop();\n }\n \n spinner = new Spinner(opts).spin(spinnerEl);\n\n if (shareEl.checked) {\n window.location.replace('#?' + getParamStringFromOpts(opts));\n }\n\n let codeEl = document.getElementById('spinner-options');\n codeEl.textContent = getOptionsCode(opts);\n Prism.highlightElement(codeEl);\n}\n\nfunction getOptionsCode(options) {\n var optDescriptions = {\n lines: 'The number of lines to draw',\n length: 'The length of each line',\n width: 'The line thickness',\n radius: 'The radius of the inner circle',\n scale: 'Scales overall size of the spinner',\n corners: 'Corner roundness (0..1)',\n color: 'CSS color or array of colors',\n fadeColor: 'CSS color or array of colors',\n speed: 'Rounds per second',\n rotate: 'The rotation offset',\n animation: 'The CSS animation name for the lines',\n direction: '1: clockwise, -1: counterclockwise',\n zIndex: 'The z-index (defaults to 2e9)',\n className: 'The CSS class to assign to the spinner',\n top: 'Top position relative to parent',\n left: 'Left position relative to parent',\n shadow: 'Box-shadow for the lines',\n position: 'Element positioning',\n };\n\n let code = \"import {Spinner} from 'spin.js';\\n\\n\";\n code += \"var opts = {\\n\";\n\n for (let opt in options) {\n let value = options[opt];\n\n if (typeof value === 'string') {\n value = \"'\" + value + \"'\";\n }\n\n code += \" \" + opt + \": \" + value + \", // \" + optDescriptions[opt] + \"\\n\";\n }\n\n code += \"};\\n\\n\";\n\n code += \"var target = document.getElementById('foo');\\n\";\n code += \"var spinner = new Spinner(opts).spin(target);\";\n\n return code;\n}\n\nfunction getOptionsFromInputs() {\n var opts = {};\n\n for (var i = 0; i < inputs.length; i++) {\n var input = inputs[i];\n var val = input.value;\n\n if (input.classList.contains('percent')) {\n val += '%';\n } else if (!input.classList.contains('string')) {\n val = parseFloat(val);\n }\n\n opts[input.name] = val;\n }\n\n // set all options so they can be shown in code example\n opts['zIndex'] = 2e9;\n opts['className'] = 'spinner';\n opts['position'] = 'absolute';\n\n for (var i = 0; i < cbInputs.length; i++) {\n var input = cbInputs[i];\n opts[input.name] = input.checked;\n document.getElementById('opt-' + input.name).textContent = input.checked;\n }\n\n return opts;\n}\n\nfunction getParamStringFromOpts(opts) {\n var params = [];\n\n for (var prop in opts) {\n var val = opts[prop];\n\n if (val !== false) {\n if (typeof val === 'string' && val.slice(-1) === '%') {\n val = val.slice(0, -1);\n }\n\n params.push(prop + '=' + encodeURIComponent(val));\n }\n }\n\n return params.join('&');\n}\n"
},
{
"path": "site/serve.json",
"content": "{\n \"headers\": [\n {\n \"source\" : \"index.html\",\n \"headers\" : [{\n \"key\" : \"Content-Security-Policy\",\n \"value\" : \"default-src 'self'; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; img-src 'self' www.gravatar.com;\"\n }]\n }\n ]\n}\n"
},
{
"path": "spin.css",
"content": "@keyframes spinner-line-fade-more {\n 0%, 100% {\n opacity: 0; /* minimum opacity */\n }\n 1% {\n opacity: 1;\n }\n}\n\n@keyframes spinner-line-fade-quick {\n 0%, 39%, 100% {\n opacity: 0.25; /* minimum opacity */\n }\n 40% {\n opacity: 1;\n }\n}\n\n@keyframes spinner-line-fade-default {\n 0%, 100% {\n opacity: 0.22; /* minimum opacity */\n }\n 1% {\n opacity: 1;\n }\n}\n\n@keyframes spinner-line-shrink {\n 0%, 25%, 100% {\n /* minimum scale and opacity */\n transform: scale(0.5);\n opacity: 0.25;\n }\n 26% {\n transform: scale(1);\n opacity: 1;\n }\n}\n"
},
{
"path": "spin.ts",
"content": "import { SpinnerOptions } from './SpinnerOptions.js';\nexport { SpinnerOptions } from './SpinnerOptions.js';\n\nconst defaults: Requiredspin.js
\n\n\n\nExample
\n\n \n \n \n
\n\n\n \n \n
\n\nFeatures
\n- \n
- No images \n
- No dependencies \n
- Highly configurable \n
- Resolution independent \n
- Uses CSS keyframe animations \n
- Works in all major browsers \n
- Includes TypeScript definitions \n
- Distributed as a native ECMAScript module \n
- MIT License \n
\n Spin.js dynamically creates spinning activity indicators that can be used as\n a resolution-independent replacement for loading GIFs.\n
\n\nInstallation
\n\n Run npm install spin.js, or save the spin.js and spin.css files in your repository.\n
JS bundling
\n\n For best performance and compatibility, it is recommended to use a module bundler such as\n Parcel, Rollup,\n or Webpack to create a production-ready code bundle.\n However, in modern browsers it is also possible to directly load the module via a script tag:\n
\n\n<script type=\"module\" src=\"node_modules/spin.js/spin.js\"></script>\n\n\n If for some reason you can't use ECMAScript modules or a module bundler,\n download spin.umd.js and save it in your repository.\n The UMD script can be used as follows:\n
\n\nvar spinner = new Spin.Spinner(opts).spin(target);\n\n\n Note that the UMD version is only available as a temporary workaround.\n Longer term it is recommended to migrate to the standard ECMAScript module.\n
\n\nCSS
\n\n Load the spin.css file to include the default animation presets.\n You could alternatively create a custom CSS keyframe animation (in your own CSS file)\n and set it using the animation property.\n
\n Note: do not use <script> or <link> tags directly referencing the files on this website.\n Doing this is likely to break your app whenever a major new version is released.\n
Usage
\n\n Run the following code when the document has loaded:\n
\n\n\n\n\n\n\n The spin() method creates the necessary HTML elements and starts the animation. If a target\n element is passed as argument, the spinner is added as first child and horizontally and vertically centered.\n
Manual insertion
\n\n In order to manually insert the spinner into the DOM you can invoke the spin() method\n without any arguments and use the el property to access the HTML element:\n
\nvar spinner = new Spinner().spin();\ntarget.appendChild(spinner.el);\n\n\nHiding the spinner
\n\n To hide the spinner, invoke the\n stop() method, which removes the UI elements from the DOM and stops the animation.\n Stopped spinners may be reused by calling spin() again.\n
Positioning
\n\n The spinner is absolutely positioned at 50% of its offset parent.\n You may specify a top and left option to position the spinner manually.\n
\n Note: The spinner element is a 0×0 pixel div that represents the center of the spinner.\n Hence, if you passed {top:0, left:0} only the lower right quarter of the spinner would\n be inside the target's bounding box.\n
\n The spinner element must be surrounded by an element using relative positioning, or the spinner will be\n outside of the parent element.\n
\n\nSupported browsers
\n\n\n Spin.js has been successfully tested in the following browsers:\n
\n- \n
- Firefox \n
- Microsoft Edge \n
- Safari \n
- Chrome \n
- Internet Explorer 10+ \n
Changes
\n\n\n See CHANGELOG.md\n
\n\nSupport
\n\n\n If you encounter any problems, please use the GitHub issue tracker.\n
\n\nAuthors
\n\n\n \n \n
\n\n![](\"https://www.gravatar.com/avatar/f1f2e1842f6ff681a6d1b0a2405d0117\"/)
\n \n ![](\"https://www.gravatar.com/avatar/5f7e5be7427b4c706eb1ff85ceb98998\"/)
\n
\n\n Theodore Brown
\nPHP 🐘 TypeScript 📐 SQL 📊
\n\n Website: theodorejb.me
\n Twitter: @theodorejb\n