Sonic.js 是一个很小的 JavaScript 类，用于创建基于 HTML5 画布的加载图像。更强大的是 Sonic.js 还提供了基于现成的例子的创建工具，可以帮助你实现更多自定义的（Loading）加载动画效果。

在线演示      源码下载

　

您可能感兴趣的相关文章

本文链接：HTML5 Canvas 实现的9个 Loading 效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】

HTML5 Canvas 实现的9个 Loading 效果的更多相关文章

  1. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  2. HTML5 SVG应用（1）——loading效果

    先看一下效果: 链接 代码: <svg version="1.1" id="loader-1" xmlns="http://www.w3.org ...

  3. 超酷！！HTML5 Canvas 水流样式 Loading 动画

    今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...

  4. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  5. 利用html5 canvas实现纯前端上传图片的裁剪

    今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...

  6. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  7. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

随机推荐

  1. 【WP 8.1开发】文件选取器的使用方法

    在以往的WP7x/8.0开发中,我们使用选择器可以浏览并打开图片.音频.视频等一些特殊文件,在8.0 SDK中的运行时API(从Win 8 app中移植)尽管提供了Windows.Storage.Pi ...

  2. SharePoint Server 2013开发之旅（四）：配置工作流开发和测试环境

    工作流这个功能,在SharePoint Server 2013中做了很大的改动.我们可以从微软官方的文档中了解一下大概的情况 http://technet.microsoft.com/zh-cn/li ...

  3. OpenJudge1700:八皇后问题 //不属于基本法的基本玩意

    1700:八皇后问题//搜索 总时间限制:  10000ms 内存限制:  65536kB 描述 在国际象棋棋盘上放置八个皇后,要求每两个皇后之间不能直接吃掉对方. 输入 无输入. 输出 按给定顺序和 ...

  4. 转[开发环境配置]在Ubuntu下配置舒服的Python开发环境

    在Ubuntu下配置舒服的Python开发环境 Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的 ...

  5. HTML标签理解

    基础回顾 1:<!DOCTYPE HTML> 这个我们都不陌生,它是文档说明,在html页面的第一行就写的是这个.在 html5中只有一个,大小写不敏感.是便于浏览器识别文档类型. 2:& ...

  6. DP - tencent2016实习生笔试A

    tencent2016实习生笔试A Problem's Link ------------------------------------------------------------------- ...

  7. 在Windows Phone 8中使用Live Connect并保持登陆状态

    Live Connect可以让各种客户端访问Live账号.获取好友列表.访问One Drive的文件等,官方地址在此:http://msdn.microsoft.com/zh-cn/live/ff51 ...

  8. 解决android sdk 无法更新

    今天更新sdk,遇到了更新下载失败问题: Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xmlFetched ...

  9. 介绍开源的.net通信框架NetworkComms框架 源码分析（十四）StreamTools

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  10. LCA---Tarjan算法

    本问题中Tarjan算法不需要设置栈和dfn,low标号,而是设置了并查集. 通过一次dfs遍历即可找出所有节点对的lca.将这样一次读取所有查询,计算一次后返回所有查询lca的算法称为离线算法 涉及 ...