2023年6月21日发(作者：)

css3实现圆环加载进度条动画最近有⼈问我关于css3圆环的问题，要实现⼀个圆环，并且有加载特效。于是我看了看⼀般关于圆环实现的原理，以及⾃⼰⼿写了⼀个加载动画。可能体验还不是特别好，但是能⽤。话不多说，⼀下是代码：html结构：

60%
css：.circle{ width: 200px; height: 200px; position: relative; border-radius: 50%; background: rgba(0,120,200,0.2);}.circle .left,.circle .right{ width: 200px; height: 200px; position: absolute; top: 0; left: 0;}.left{ clip: rect(0,100px,auto,0);}.right{ clip: rect(0,auto,auto,100px);}.left_con,.right_con{ display: block; width: 200px; height: 200px; border-radius: 50%; background: rgb(0,120,200);

position: absolute; top: 0; left: 0;}.left_con{ clip: rect(0,100px,auto,0);}.right_con{ clip: rect(0,auto,auto,100px);}.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;}为操作⽅便引⼊了jqjs代码：var annulus = function(speed){ var _this = this; _ = speed||10; function init(){ circle(); } function circle(){ $('.circle').each(function(index, el) { var numStart = 0; var num = $(this).find('span').text() * 3.6; var timer = null; var that = this; timer = setInterval(function(){ if(numStart>num){ clearInterval(timer); tiemr = null; } animateLoading(that,numStart); numStart += 3.6; },_); }); } function animateLoading(_this,num){ if (num <= 180) { $(_this).find('.right_con').css({'transform':"rotate(" + num + "deg)"}); } else { $(_this).find('.right_con').css({'transform': "rotate(180deg)"}); $(_this).find('.left_con').css({'transform': "rotate(" + (num - 180) + "deg)"}); }; }; return { init:init }}var a = new annulus(10);();

2023年6月21日发(作者：)

css3实现圆环加载进度条动画最近有⼈问我关于css3圆环的问题，要实现⼀个圆环，并且有加载特效。于是我看了看⼀般关于圆环实现的原理，以及⾃⼰⼿写了⼀个加载动画。可能体验还不是特别好，但是能⽤。话不多说，⼀下是代码：html结构：

60%
css：.circle{ width: 200px; height: 200px; position: relative; border-radius: 50%; background: rgba(0,120,200,0.2);}.circle .left,.circle .right{ width: 200px; height: 200px; position: absolute; top: 0; left: 0;}.left{ clip: rect(0,100px,auto,0);}.right{ clip: rect(0,auto,auto,100px);}.left_con,.right_con{ display: block; width: 200px; height: 200px; border-radius: 50%; background: rgb(0,120,200);

position: absolute; top: 0; left: 0;}.left_con{ clip: rect(0,100px,auto,0);}.right_con{ clip: rect(0,auto,auto,100px);}.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;}为操作⽅便引⼊了jqjs代码：var annulus = function(speed){ var _this = this; _ = speed||10; function init(){ circle(); } function circle(){ $('.circle').each(function(index, el) { var numStart = 0; var num = $(this).find('span').text() * 3.6; var timer = null; var that = this; timer = setInterval(function(){ if(numStart>num){ clearInterval(timer); tiemr = null; } animateLoading(that,numStart); numStart += 3.6; },_); }); } function animateLoading(_this,num){ if (num <= 180) { $(_this).find('.right_con').css({'transform':"rotate(" + num + "deg)"}); } else { $(_this).find('.right_con').css({'transform': "rotate(180deg)"}); $(_this).find('.left_con').css({'transform': "rotate(" + (num - 180) + "deg)"}); }; }; return { init:init }}var a = new annulus(10);();