![jQuery LoadingЧ¹û²å¼þ](http://www.aseoe.com/uploadfile/2015/1206/20151206093227359.jpg)
¼ò½é
ΪÁËÌá¸ßÓû§ÌåÑ飬¸øÒ³Ãæ»òÓ¦ÓüÓÈë Loading Ч¹û×î»ù±¾×î³£¼ûµÄ·½·¨¡£shCircleLoader ÊÇÒ»¸ö»ùÓÚ jQuery µÄ²å¼þ£¬ËüÄܹ»ºÜ·½±ã¿ìËÙµÄÖÆ×÷ Loading Ч¹û¡£¸Ã Loading Ч¹ûÓɶà¸ö div ×é³É£¬Ã»ÓÐÈκÎͼƬ¡£shCircleLoader »¹ÌṩÁËÖÚ¶àÊôÐÔ£¬Äã¿ÉÒÔ¸ù¾ÝÕâЩÊôÐÔ×Ô¶¨Òå³ö¸÷ÖÖ¸÷ÑùµÄ Loading Ч¹û¡£
¼æÈÝ
jQuery ¼æÈÝ
¼æÈÝ jQuery 1.4+¡£
ä¯ÀÀÆ÷¼æÈÝ
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE10+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
shCircleLoader ʹÓÃÁË CSS3 ÊôÐÔ£¬ËùÒÔ²»¼æÈݵͰ汾 IE ä¯ÀÀÆ÷¡£
ʹÓ÷½·¨
1¡¢ÒýÈëÎļþ
<script src="js/jquery.min.js"></script> <script src="js/jquery.shCircleLoader.js"></script>
2¡¢HTML
HTML ½á¹¹·Ç³£¼òµ¥£¬Ö»ÐèÒ»¸ö¿ÕÔªËؼ´¿É£¬²»¹ýÄú×îºÃÖ¸¶¨Ò»¸ö¿í¶ÈºÍ¸ß¶È£¬Òª²»È»ÎÞ·¨¿´µ½ Loading Ч¹û¡£
<div class="loading"></div>
3¡¢JavaScript
$('.loading').shCircleLoader({ //options });
ÅäÖÃ
ÊôÐÔ/·½·¨ | ÀàÐÍ | ĬÈÏÖµ | ˵Ã÷ |
---|---|---|---|
namespace | ×Ö·û´® | shcl | ÃüÃû¿Õ¼ä£¬Ìí¼ÓÒ»¸ö class Ãû³Æ |
radius | ×Ö·û´® | auto | Loading µÄÔ²½Ç»¡¶È£¬Ä¬ÈÏֵΪ auto£¬½«¸ù¾ÝÑ¡ÔñÆ÷µÄ¿í¸ß×Ô¶¯¼ÆËã |
dotsRadius | ×Ö·û´® | auto | Ô²µãÔ²½Ç»¡¶È |
color | ×Ö·û´® | auto | Ô²µãÑÕÉ«£¬Ä¬ÈÏΪ auto£¬½«´ÓÑ¡ÔñÆ÷ÖлñÈ¡ |
dots | ÕûÊý | 12 | Ô²µãµÄ¸öÊý |
duration | ÊýÖµ | 1 | ÿ¸öÔ²µãµÄ¶¯»Ê±¼ä£¬µ¥Î»ÎªÃë |
clockwise | ²¼¶ûÖµ | false | ˳ʱÕëÐýת |
externalCss | ²¼¶ûÖµ | false | ʹÓÃÍⲿµÄ CSS£¬¼´²»Ê¹Óòå¼þ±¾ÉíµÄ CSS |
keyframes | ×Ö·û´® | ×Ô¶¯ CSS3 ¶¯»Ð§¹û£¬Ä¬ÈÏֵΪ 0%{{prefix}transform:scale(1)}80%{{prefix}transform:scale(.3)}100%{{prefix}transform:scale(1)} |
|
uaPrefixes | Êý×é | ǰ׺£¬ÓÃÓÚ¼æÈݸ÷ÖÖä¯ÀÀÆ÷£¬Ä¬ÈÏֵΪ [‘o’, ‘ms’, ‘webkit’, ‘moz’, ”] |
±¾Õ¾»¶ÓÈκÎÐÎʽµÄתÔØ£¬µ«ÇëÎñ±Ø×¢Ã÷³ö´¦£¬×ðÖØËûÈËÀͶ¯³É¹û
תÔØÇë×¢Ã÷£º ÎÄÕÂתÔØ×Ô£º°®Ë¼×ÊÔ´Íø http://www.aseoe.com/show-79-721-1.html
תÔØÇë×¢Ã÷£º ÎÄÕÂתÔØ×Ô£º°®Ë¼×ÊÔ´Íø http://www.aseoe.com/show-79-721-1.html