中文字幕av_天堂a在线aV亚洲在线_亚洲自拍日韩欧洲不卡在线
Example
Features
- No images
- No dependencies
- Highly configurable
- Resolution independent
- Uses CSS keyframe animations
- Works in all major browsers
- Includes TypeScript definitions
- Distributed as a native ES6 module
- MIT License
Spin.js dynamically creates spinning activity indicators that can be used as a resolution-independent replacement for loading GIFs.
Installation
Run npm install spin.js
, or save the spin.js and spin.css files in your repository.
JS bundling
For best performance and compatibility, it is recommended to use a module bundler such as Parcel, Rollup, or Webpack to create a production-ready code bundle. However, in modern browsers it is also possible to directly load the module via a script tag:
<script type="module" src="node_modules/spin.js/spin.js"></script>
If for some reason you can't use ES6 modules or a module bundler, download spin.umd.js and save it in your repository. The UMD script can be used as follows:
var spinner = new Spin.Spinner(opts).spin(target);
Note that the UMD version is only available as a temporary workaround. Longer term it is recommended to migrate to the standard ES6 module.
CSS
Load the spin.css file to include the default animation presets.
You could alternatively create a custom CSS keyframe animation (in your own CSS file)
and set it using the animation
property.
Note: do not use <script>
or <link>
tags directly referencing the files on this website.
Doing this is likely to break your app whenever a major new version is released.
Usage
Run the following code when the document has loaded:
import {Spinner} from 'spin.js'; var opts = { lines: 12, // The number of lines to draw length: 7, // The length of each line width: 5, // The line thickness radius: 10, // The radius of the inner circle scale: 1.0, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) color: '#000', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors speed: 1, // Rounds per second rotate: 0, // The rotation offset animation: 'spinner-line-fade-default', // The CSS animation name for the lines direction: 1, // 1: clockwise, -1: counterclockwise zIndex: 2e9, // The z-index (defaults to 2000000000) className: 'spinner', // The CSS class to assign to the spinner top: '50%', // Top position relative to parent left: '50%', // Left position relative to parent shadow: 'none', // Box-shadow for the lines position: 'absolute' // Element positioning }; var target = document.getElementById('foo'); var spinner = new Spinner(opts).spin(target);
The spin()
method creates the necessary HTML elements and starts the animation. If a target
element is passed as argument, the spinner is added as first child and horizontally and vertically centered.
Manual insertion
In order to manually insert the spinner into the DOM you can invoke the spin()
method
without any arguments and use the el
property to access the HTML element:
var spinner = new Spinner().spin(); target.appendChild(spinner.el);
Hiding the spinner
To hide the spinner, invoke the
stop()
method, which removes the UI elements from the DOM and stops the animation.
Stopped spinners may be reused by calling spin()
again.
Positioning
The spinner is absolutely positioned at 50% of its offset parent.
You may specify a top
and left
option to position the spinner manually.
Note: The spinner element is a 0×0 pixel div that represents the center of the spinner.
Hence, if you passed {top:0, left:0}
only the lower right quarter of the spinner would
be inside the target's bounding box.
The spinner element must be surrounded by an element using relative positioning, or the spinner will be outside of the parent element.
Supported browsers

Spin.js has been successfully tested in the following browsers:
- Firefox
- Microsoft Edge
- Safari
- Chrome
- Internet Explorer 10+
Changes
See CHANGELOG.md
Contact
If you encounter any problems, please use the GitHub issue tracker.
For updates 中文字幕av_天堂a在线aV亚洲在线_亚洲自拍日韩欧洲不卡在线.
If you like spin.js and use it in the wild, let me know.