jQuery環形旋轉載入進度條效果
本章節分享一段程式碼例項,它實現了進度條載入效果。
通過jquery來操控css3樣式設定,實現了環形旋轉,並且帶有百分比。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } .circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #FFC000; } .pie_left, .pie_right { width: 200px; height: 200px; position: absolute; top: 0; left: 0; } .left, .right { display: block; width: 200px; height: 200px; background: #000; border-radius: 50%; position: absolute; top: 0; left: 0; } .pie_right, .right { clip: rect(0 auto auto 100px); clip: rect(0,auto,auto,100px); } .pie_left, .left { clip: rect(0 100px auto 0); clip: rect(0,100px,auto,0); } .mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 16px; transition: all ease-in; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function() { var indexCurrent = 0; setInterval(function(){ if(indexCurrent<100){ indexCurrent++; }else{ indexCurrent=0; } $(".mask").find('span').text(indexCurrent); $('.circle').each(function(index, el) { var num = $(this).find('span').text() * 3.6; if (num<=180) { $(this).find('.right').css('transform', "rotate(" + num + "deg)"); $(this).find('.left').css('transform', "rotate(" + 0 + "deg)"); } else { $(this).find('.right').css('transform', "rotate(180deg)"); $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)"); }; }); },50); }); </script> </head> <body> <div class="a"><div class="b"></div></div> <div class="circle"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>1</span>%</div> </div> </body> </html>
相關文章
- Android 自定義圓形旋轉進度條,仿微博頭像載入效果Android
- canvas環形進度條效果Canvas
- 實現環形進度條效果【一】
- jQuery隨滑鼠旋轉的圖形效果jQuery
- canvas環形百分比進度條效果Canvas
- 超酷jQuery進度條載入動畫集合jQuery動畫
- jQuery 進度條效果程式碼jQuery
- jQuery載入進度條例項程式碼jQuery
- jQuery實進度條效果詳解jQuery
- 滑鼠懸浮實現環形旋轉效果
- CSS3圓形進度條效果CSSS3
- CSS3 螺紋載入進度條效果CSSS3
- CSS3實現的環形旋轉載入補全效果程式碼例項CSSS3
- jQuery進度條效果程式碼例項jQuery
- js百分比載入進度條效果JS
- vue中頁面載入進度條效果的實現Vue
- CSS3旋轉載入等待效果CSSS3
- Android花樣loading進度條(三)-配文字環形進度條Android
- svg環形百分比進度條SVG
- canvas小球旋轉loadding載入效果Canvas
- jQuery圖片放大和旋轉效果jQuery
- 直播電商平臺開發,環形進度條元件元件
- 直播商城系統原始碼,環形進度條元件原始碼元件
- css3點狀旋轉載入等待效果CSSS3
- jQuery監聽檔案上傳實現進度條效果jQuery
- jquery ui進度條 progressbarjQueryUI
- svg和css3建立環形漸變進度條SVGCSSS3
- canvas百分比環形進度條程式碼Canvas
- Flutter 波浪圓形進度條Flutter
- 自定義圓形進度條
- SVG畫圓形進度條SVG
- ajax進度條 非同步下載進度條非同步
- css3實現的旋轉載入等待效果CSSS3
- CSS快遞進度條效果CSS
- 可愛!帶有數字顯示的載入進度條效果外掛
- Android偽圖片載入進度效果Android
- JQuery UI之進度條——ProgressbarjQueryUI
- 常見的網頁載入進度條網頁