`

在浏览器 favicon 上显示进度 很帅 很酷

阅读更多

Piecon

Pie charts in your favicon!

A tiny javascript library for dynamically generating progress pie charts in your favicons.

Look up at your tabs for the live demo!

Documentation

Basic usage


Piecon.setProgress(12);
Piecon.setProgress(25);
...
Piecon.reset();

Options


Piecon.setOptions({
  color: '#ff0084', // Pie chart color
  background: '#bbb', // Empty pie chart color
  shadow: '#fff', // Outer ring color
  fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
});

Browser Support

Piecon has been tested to work completely in the following browsers (older versions may be supported, but haven't been tested):

  • Chrome 15+
  • Firefox 9+
  • Opera 11+

Currently the library falls back to title updates for the following browsers:

  • Internet Explorer 9
  • Safari 5+
  •  <link rel="icon" href="favicon.ico" /> 
  •    <script src="jquery-1.8.2.min.js"></script>
  •   <script src="piecon.js"></script>
  •   <script>
  •   (function(){
  •  
  •     var count = 0;
  •     Piecon.setOptions({fallback: 'force'});
  •     var i = setInterval(function(){
  •       if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }
  •       Piecon.setProgress(count);
  •     }, 250);
  •   })();
  •   
  •   </script>

不过用着用着应该是个标题党罢了 没有什么实质用处。

我的博客 http://zencart.me

分享到:
评论

相关推荐

    网站浏览器导航图标favicon.ico

    网站浏览器导航图标,通常被称为"Favicon",是一个网站在浏览器标签页、历史记录、书签等位置显示的小图标。这个小图标是网站品牌形象的重要组成部分,它可以帮助用户快速识别和区分不同的网页。在“网站浏览器导航...

    react-操作favicon的React组件可作为加载或进度指示器

    在React开发中,有时我们需要对页面的favicon进行动态操作,比如在数据加载过程中显示一个加载动画或者进度指示器。"react-loadcon"就是一个专门用于这个目的的React组件库,它允许开发者轻松地将favicon转化为一个...

    favicon

    在互联网上,`favicon`已经成为了一个重要的视觉元素,它可以让用户在众多的网页中快速识别出特定的网站。 **1. 创建与应用** 创建一个`favicon`通常是通过设计软件来完成的,比如Adobe Illustrator或Photoshop。...

    favicon.ico 图标大全

    Favicon(Favorites Icon)是网站的图标,通常显示在浏览器的地址栏、书签栏以及标签页上,使用户能够快速识别和记忆网站。 1. **favicon.ico 的基本概念**: - Favicon 是一种特殊的图像格式,用于定义网站的代表...

    favicon-badge:一个Polymer元素,用于使用动态设置的数字声明式更新Webapp的favicon。

    3. **favicon-badge功能**:此组件的核心功能是将数字显示在favicon上,通过JavaScript表达式动态设置数字值。这使得开发者可以轻松地向用户展示未读消息计数或其他关键数据。例如,当用户有未读邮件时,favicon上...

    解决Vue 项目打包后favicon无法正常显示的问题

    综上所述,解决Vue项目打包后favicon无法显示的问题关键在于正确配置静态资源路径,并且注意浏览器缓存可能带来的影响。通过上述方法,我们可以确保用户在访问网站时能够看到正确且更新过的favicon图标。希望本文的...

    favicon.zip

    首先,Favicon是"Favorites Icon"的缩写,它是在浏览器地址栏、书签、历史记录以及新标签页中显示的小型图标。这些图标通常为16x16像素或32x32像素,格式通常是ICO,但也可以是PNG、JPEG或其他支持的图像格式。 在...

    vue小图标favicon不显示的解决方案

    然而,在使用 Vue 框架时,小图标 Favicon 并不总是显示,这可能会导致用户体验不佳。 二、Vue 小图标 Favicon 不显示的原因 在 Vue 项目中,小图标 Favicon 不显示的原因可能有多种,例如: * Favicon.ico 文件...

    为网站添加网站图标ico,动画图标gif(在浏览器地址栏中显示).zip

    网站图标(Favicon)是网页的一种重要组成部分,它在浏览器的地址栏、书签和历史记录中显示,有助于提升网站的识别度。本教程将详细解释如何为网站添加静态的ICO图标以及动态的GIF动画图标。 首先,我们来了解什么...

    favicon.rar

    在IT行业中,网站的"favicon"(Favicon的全称是Favorites Icon,即收藏夹图标)是一个非常重要的细节,它代表了网站的品牌形象,并在浏览器标签、书签、历史记录等多个地方显示。"favicon.rar"这个文件是一个压缩包...

    bitbug_favicon

    在互联网上,每个网站通常都有一个独特的favicon,它显示在浏览器的地址栏、书签、标签页等位置,用于快速识别和区分不同的网站。"bitbug_favicon"可能是这个特定开发者的favicon设计或者是一个处理favicon相关问题...

    favicon 小游戏探索

    在IT行业中, favicon 是一个非常常见但经常被忽视的元素,它是网站的图标,通常出现在浏览器的地址栏、书签和标签页上。本话题将深入探讨“favicon 小游戏探索”,这是一种创新的方式,通过 favicon 来实现互动的小...

    将reactsvg渲染到选项卡的favicon图标

    favicon是网站的图标,通常显示在浏览器的地址栏、书签和标签页上。在HTML中,我们通过`&lt;link&gt;`标签来设置favicon,例如: ```html &lt;link rel="icon" type="image/png" href="path/to/favicon.png"&gt; ``` 对于SVG...

    在浏览器地址栏左边添加网站logo图标

    因此,在实际应用中,建议测试不同浏览器下的显示效果,确保图标能够正确显示。 #### 总结 通过在HTML头部添加特定的`&lt;link&gt;`标签,我们可以轻松地为网站添加自定义的logo图标,从而提升用户体验和品牌识别度。...

    Vue项目添加动态浏览器头部title的方法

    通常情况下,网页标题的改变可以提高用户体验,例如,在页面跳转时,浏览器的标题栏能显示当前页面的主题,这在用户进行多窗口浏览时尤其有用。同时,合理的标题设置也对搜索引擎优化(SEO)有积极作用。本文将介绍...

    在线ICO图标制作 Favicon.ico图片在线制作网站PHP源代码 支持多种图片格式转换

    favicon.ico 一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的 logo,如图红圈的位置, 目前主要的浏览器都支持 favicon.ico 图标. 如果要让网站看起来更专业、更美、更有个性,制造...

    LaravelFavicon根据您的环境设置创建动态favicon

    Favicon,全称Favorites Icon,是网页上显示的小图标,通常位于浏览器的地址栏、收藏夹或标签页上,用于识别和区分不同的网站。对于品牌识别和用户体验来说,它是一个重要的元素。然而,传统的favicon通常是静态的,...

    在web项目地址(浏览器上)前加图标

    在Web开发过程中,为了增强网站的品牌识别度以及用户体验,我们经常会为网站添加一个图标(通常称为Favicon),显示在浏览器标签页的左侧。这个小图标不仅能够帮助用户快速识别不同的网站,还能提升网站的专业形象。...

    php 抓取任意网站 favicon 小图标

    在PHP编程中,抓取网站的favicon小图标是一项常见的任务,通常用于在浏览器标签或书签中显示网站的标识。Favicon是“Favorites Icon”的缩写,是一个网站的图标,通常为16x16像素的PNG或ICO格式。本项目提供了一套...

Global site tag (gtag.js) - Google Analytics