页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

轻量级动画图标favicon插件

其他特效 HTML我帮您 29天前  次浏览

轻量级动画图标favicon插件网站的小图标基本上都是静态的,你如果想用动态的图标,可以考虑用这个。

由于浏览器主线程中计时器函数的限制,使用canvas进行动画的基本解决方案无法开箱即用。库使用web worker创建当tab不在焦点时不停止的计时器。

如果您有耗时的计算和人员切换选项卡,并且希望在应用程序完成其所做的任何操作时通知他们,则可以使用此库。

轻量级动画图标favicon插件

<script src="favloader.js"></script>
<script src="https://unpkg.com/favloader@0.x.x"></script>
favloader.init({
    size: 16,
    radius: 6,
    thickness: 2,
    color: '#0F60A8',
    duration: 5000 });
favloader.init({
    gif: 'loader.gif' });
var p = 0; var reversed = false; var width = 2; var size = 32; favloader.init({
  size: size, frame: function(ctx) { ctx.fillStyle = '#F00A0A'; ctx.fillRect(p, 0, width, size); if (reversed) {
      p--; if (p === 0) {
        reversed = false;
      }
    } else {
      p++; if (p === size - width) {
        reversed = true;
      }
    }
  }
});

相关链接

发表评论