spin.js - Animated CSS3 Loading Spinner

spin.js - Animated CSS3 Loading Spinner

版本:

浏览量:1348

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件git

推荐指数:

详细信息

spin.js 是一个高度可配置的 js 加载 Spinner 库,适用于所有主要浏览器,没有图像、没有外部 CSS 和依赖项(支持 jQuery,但不是必需的)。

您可以自定义线、宽、高、半径、角、旋转、速度等选项。

用打字稿编写,目前作为一个普通的 JavaScript 插件工作。

你可能还喜欢:

  • 最佳加载微调器和指标

基本用法:

1. 为加载微调器创建一个容器。

<div id="example" class="demo"></div>

2. 在网页的标题中包含必要的样式表。

<link href="https://cdn.jsdelivr.net/npm/spin.js@latest/spin.css" rel="stylesheet">

3. 导入 spin.js 或在您的网页上包含主要的 JavaScript 文件 spin.js

<script src="https://cdn.jsdelivr.net/npm/spin.js@latest/spin.min.js"></script>
# NPM
$ npm install spin.js --save
 
import {Spinner} from 'spin.js';

4. 初始化 spin.js 以激活加载微调器。

var target = document.getElementById('example');
var spinner = new Spinner().spin(target);

5. 可能的插件选项来定制你的加载效果。

new Spinner({
 
    // The number of lines
    lines: 12,
 
    // The length of each line
    length: 7,
 
    // The width of each line
    width: 5,
 
    // The radius of the inner circle
    radius: 10,
 
    // Scales size
    scale: 1,
 
    // Corner roundness (0..1)
    corners: 1,
 
    // CSS color or array of colors
    color: '000',
 
    // CSS color or array of colors
    fadeColor: 'transparent',
 
    // <a href="https://www.jqueryscript.net/animation/">Animation</a> speed
    speed: 1,
 
    // Rotation offset
    rotate: 0,
 
    // The CSS animation name for the lines
    animation: 'spinner-line-fade-quick',
 
    // 1: clockwise, -1: counterclockwise
    direction: 1,
 
    // z-index
    zIndex: 2e9,
 
    // The CSS class
    className: 'spinner',
 
    // Top position relative to parent
    top: '50%',
 
    // Left position relative to parent
    left: '50%',
 
    // Box-shadow
    shadow: '0 0 1px transparent',
 
    // Element positioning
    position: 'absolute'
     
})

6.手动停止加载动画..

new Spinner().stop();

更多例子:

  • 基本示例

  • 使用 Modernizr 示例

  • 设置示例

  • 定位示例

变更日志:

v4.0.0 (2018-07-11)

  • 截至日期d到最新版本

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。