首页>>Jquery文字>>几种不同样式的loading效果 可以显示百分比(2014-09-03)

几种不同样式的loading效果 可以显示百分比

几种不同样式的loading效果 可以显示百分比
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <h2>Default loader</h2>  
  2. <pre>$('#loader').shCircleLoader();</pre>  
  3. <div id="shclDefault"></div>  
  4. <hr />  
  5.   
  6. <h2>Counterclockwise direction</h2>  
  7. <pre>$('#loader').shCircleLoader({clockwise: false});</pre>  
  8. <div id="shclCcw"></div>  
  9. <hr />  
  10.   
  11. <h2>Custom color</h2>  
  12. <pre>$('#loader').shCircleLoader({color: "red"});</pre>  
  13. <div id="shclColor"></div>  
  14. <hr />  
  15.   
  16. <h2>Custom duration</h2>  
  17. <pre>$('#loader').shCircleLoader({duration: 2});</pre>  
  18. <div id="shclDuration"></div>  
  19. <hr />  
  20.   
  21. <h2>Custom dots</h2>  
  22. <pre>  
  23. $('#loader').shCircleLoader({  
  24.     dots: 24,  
  25.     dotsRadius: 10  
  26. });  
  27. </pre>  
  28. <div id="shclDots"></div>  
  29. <hr />  
  30.   
  31. <h2>Custom dot animation</h2>  
  32. <pre>  
  33. $('#loader').shCircleLoader({  
  34.     keyframes:  
  35.        "0%   {background:black}  
  36.         40%  {background:transparent}  
  37.         60%  {background:transparent}  
  38.         100% {background:black}"  
  39. });  
  40. </pre>  
  41. <div id="shclKeyframes"></div>  
  42. <hr />  
  43.   
  44. <h2>Custom namespace</h2>  
  45. <pre>  
  46. $('#loader').shCircleLoader({  
  47.     namespace: "myns",  
  48.     color: "transparent",  
  49.     dotsRadius: 15  
  50. });  
  51. </pre>  
  52. <h3>CSS:</h3>  
  53. <pre>  
  54. .myns > div {  
  55.     box-shadow: 0 0 6px black, inset 0 0 6px black;  
  56. }  
  57. </pre>  
  58. <div id="shclNs"></div>  
  59. <hr />  

 


原文地址:http://www.freejs.net/article_jquerywenzi_428.html