带有动态加载文本的加载指示器 - Incipit

版本:

浏览量:1509

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

Incipit 是一个 jQuery 插件，用于创建有吸引力的加载指示器，其中包含存储在 JSON 文件中的自定义加载微调器、加载消息、站点徽标和动态随机引号。

特征：

10 种加载微调样式。
从 JSON 文件中随机加载引号。
高度可定制的加载屏幕。
响应式设计。

如何使用它：

1.incipit.css在head节中插入样式表，incipit.js在 jQuery 库之后但在结束body标记之前插入JavaScript 。

<link href="src/css/incipit.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous"></script>
<script src="src/js/incipit.js"></script>

2. 使用默认设置初始化 jQuery Incipit 加载指示器插件。

$('body').IncipitInit({
  // options here
});

3. 需要时显示加载指示器。

$.Incipit('show');

4. 以编程方式隐藏加载指示器。

$.Incipit('hide');

5.所有默认设置自定义加载指示器。

$('body').IncipitInit({
 
  // background color of loading screen
  backgroundColor : "#FFFFFF",
 
  // border color
  borderColor : "#CCCCCC",
 
  // text color
  textColor : "#000000",
 
  // span color
  spanColor : "#7e7e7e",
 
  // loading indicator
  // 'arrow', 'download', 'upload'
  // 'solid-snake', 'penduleum'
  // 'fading-balls', 'fading-lines'
  // 'round-block', 'oval-circle'
  icon : "fading-squares",
 
  // or 'fr'
  language : "en",
 
  // displays loading message
  note : false,
 
  // custom loading message
  noteCustom : "",
 
  // displays your site logo
  logo : false,
 
  // path to site logo
  logoSrc : _PATH+'image/your_logo.svg'
   
});

6. 如您在incipit-src.en.json.

{
  "material": [
    {
      "content": "The Nellie, a cruising yawl, swung to her anchor without a flutter of the sails, and was at rest.»",
      "author": "Joseph Conrad",
      "origin": "Heart of Darkness"
    },
    {
      "content": "« Christmas won't be Christmas without any presents, » grumbled Jo, lying on the rug.",
      "author": "Louisa May Alcott",
      "origin": "Little Women"
    },
    {
      "content": "Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.",
      "author": "Lyman Frank Baum",
      "origin": "The Wonderful Wizard of Oz"
    }
  ]
}

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码