zoukankan      html  css  js  c++  java
  • atitit.loading的设计与实现控件选型attilax 总结

    atitit.loading的设计与实现控件选型attilax 总结

    1. Percentage Loader(推荐) 1

    1.1. 起始百分比::调整  progress 1

    2. CSS3 Loading Spinners Without Images 2

    2.1.1. CSS Transforms 2

    2.1.2. Animation 3

    3. Ajax Style Loading Animation in CSS3 ( no Images ) 3

    4. PageLoading - jQuery plugin 5

    5. Edit fiddle - JSFiddle.htm 5

    6. jQuery Circular Progress Bar 5

    7. jQuery Progress Bar 6

    8. 参考 6

    1. Percentage Loader(推荐)

    一款轻量的 jQuery 进度条插件,以百分比的形式呈现加载进度,同时显示已加载的内容大小。

    1.1. 起始百分比::调整  progress 

     

      var $topLoader = $("#topLoader").percentageLoader({ 256, height: 256, controllable : true, progress : 0.01, onProgressUpdate : function(val) {

      var totalKb = 3000;  ///  more bit more time 

    作者:: 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com

    转载请注明来源: http://blog.csdn.net/attilax

     

    2. CSS3 Loading Spinners Without Images

    2.0.1. CSS Transforms

    CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

     

    transform:rotate(45deg) translate(0, -35px);

    If you rotate first, and then translate (move), it will move along the rotated axis. The above code translates a block to the top-right corner (45 degrees). (the gray div is not transformed while the black one is.)

    Using this, I could rotate and translate a bunch of divs to create loading spinners (though this one doesn’t spin yet!):

    In this example, each div is rotated an additional 45 degrees. The first one is not rotated, the second one is rotated 45 degrees, the one after that 90 degrees, and so forth. Additionally, each div has increased opacity to make it look like most loading spinners.

    2.0.2. Animation

    Webkit supports CSS animations, but these are continuous while most loading spinners are not. On the left side is a spinner animated with CSS animation (only works in Safari and Chrome), on the right there’s one animated with a small bit of JavaScript to look like regular loading spinners:

    The code for the CSS animation is fa

    3. Ajax Style Loading Animation in CSS3 ( no Images )

    Facebook style

    HTML

     <div id='facebook' >             <div id='block_1' class='facebook_block'></div>             <div id='block_2' class='facebook_block'></div>             <div id='block_3' class='facebook_block'></div></div>

    CSS

    #facebook{ margin-top:30px; float:left;}.facebook_block{ background-color:#9FC0FF; border:2px solid #3B5998; float:left; height:30px; margin-left:5px; 8px;        opacity:0.1; -webkit-transform:scale(0.7); -webkit-animation-name: facebook;  -webkit-animation-duration: 1s;  -webkit-animation-iteration-count: infinite;  -webkit-animation-direction: linear; }#block_1{  -webkit-animation-delay: .3s; }#block_2{  -webkit-animation-delay: .4s;}#block_3{  -webkit-animation-delay: .5s;}@-webkit-keyframes facebook{ 0%{-webkit-transform: scale(1.2);opacity:1;} 100%{-webkit-transform: scale(0.7);opacity:0.1;}}

    4. PageLoading - jQuery plugin

    5. Edit fiddle - JSFiddle.htm

    6. jQuery Circular Progress Bar

    这款环形进度条加载插件可以非常灵活的定制外观、加载速度以及设置特定的进度值。

    源码下载    在线演示

     

    7. jQuery Progress Bar

    一款非常简单的百分比进度条插件,可以参数灵活的控制百分比的增减,有动画效果。

    源码下载    在线演示

    8. 参考

    Ajax Style Loading Animation in CSS3 ( no Images ) - nikesh.me.htm

    10个漂亮的CSS3+jQueryLoading加载条动画设计插件 - JavaScript - 酷站代码.htm

    8款效果精美的 jQuery 加载动画和进度条插件 梦想天空(山边小溪) 博客园.htm

    8款效果精美的 jQuery 加载动画和进度条插件 梦想天空(山边小溪) 博客园.htm

  • 相关阅读:
    USB无线网卡导致耳机电流声很大
    知乎广告太多怎么办?
    网络机顶盒固件提取、编辑和打包
    GOOGLE机器学习速成班
    windows xp版本的chrome浏览器去哪里下载呢?
    [转载]HTTP无状态是什么意思?
    [转载]HTTP的无状态是什么意思?
    安卓手机网页打开淘宝总是弹出应用市场
    PLSQL Developer 客户端工具的安装
    VMware虚拟网卡设置问题
  • 原文地址:https://www.cnblogs.com/attilax/p/5963704.html
Copyright © 2011-2022 走看看