那么我们目前的做法就是 要给右侧的公共部分调用删掉，也就是完全删掉loading-1，然后把右侧的调用也分别 放在 四组内，而且我们的后台过来的角度中，也要重新再传一份单独的，外圈右角度 和 外圈左角度。
也就是说 ，当总度数大于180度时候，右侧= 180，左侧= 度数-180
当度数小于 180度的时候，右侧 = 度数，左侧=0
说干就干，先删掉公共部分调用：
删除loading-1：
然后四段代码内加上right相关：
注意划红线的地方，千万千万别抄错！
但是我们目前还不知道调用哪部分，所以我们还要新建 四组专给右侧部分的loading
取名为 loading-2r /3r /4r/ 5r
注意调用代码 我再次进行了修改，修改如下：
千万千万别写错 调用！！！
然后是下面的 四个新的loading 2r/3r/4r/5r
图没截全，大家把5r也写上。
好了，现在我们要回到views.py中，再弄一套左右角度变量。
新变量为 tj_x.du_left 和 tj_x.du_right
在前端替换：
注意对照序号，变量名是从1 -4 ，而前端的loading-是从2 -5
好，重启服务，刷新页面。
效果如下：
可以看到，终于成功的实现了 这个东西。解决了原作者隐瞒的缺陷问题。
大家如果对CSS不熟悉，这种问题基本就是无解了。
好了，首页到此就暂时告一段落了。
最后附上 VIEWS函数源码 和 这个home_tj.html的源码。方便大家直接复制。
from django.shortcuts import render from myapp.models import * # Create your views here. def home(request): res = {} res['user'] = request.user res['big_statistics'] = list(DB_Statistics.objects.filter(tool_which='big').values()) data_tj = [79,1223,22,9] #这是四个维度的数据 data_b = [(i/(10**len(str(i))))*360 for i in data_tj] res['tj_1'] = {"num":data_tj[0],'du':data_b[0],'du_left':data_b[0]-180 if data_b[0]>180 else 0,'du_right':180 if data_b[0]>180 else data_b[0]} res['tj_2'] = {"num":data_tj[1],'du':data_b[1],'du_left':data_b[1]-180 if data_b[1]>180 else 0,'du_right':180 if data_b[1]>180 else data_b[1]} res['tj_3'] = {"num":data_tj[2],'du':data_b[2],'du_left':data_b[2]-180 if data_b[2]>180 else 0,'du_right':180 if data_b[2]>180 else data_b[2]} res['tj_4'] = {"num":data_tj[3],'du':data_b[3],'du_left':data_b[3]-180 if data_b[3]>180 else 0,'du_right':180 if data_b[3]>180 else data_b[3]} return render(request,'home.html',res)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> .demo{ padding: 2.5em; background: #fff; } .progress{ width: 100px; height: 100px; line-height: 150px; background: none; margin: 0 auto; box-shadow: none; position: relative; overflow: visible; } .progress:after{ content: ""; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #fff; position: absolute; top: 0; left: 0; } .progress > span{ width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; } .progress .progress-left{ left: 0; } .progress .progress-bar{ width: 100%; height: 100%; background: none; border-width: 5px; border-style: solid; position: absolute; top: 0; } .progress .progress-left .progress-bar{ left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; } .progress .progress-right{ right: 0; } .progress .progress-right .progress-bar{ left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; } .progress .inner-circle, .progress .progress-value{ width: 60px; height: 60px; border-radius: 50%; border: 5px solid #8e8e8e; font-size: 18px; font-weight: bold; line-height: 50px; text-align: center; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .progress .inner-circle:after{ content: ""; width: 5px; height: 30px; background: #8e8e8e; margin: 0 auto; position: absolute; top: -30px; left: 0; right: 0; z-index: 2; transition: all 10s linear 0s; } .progress.blue .progress-bar{ border-color: #049dff; } .progress.blue .progress-value{ color: #049dff; } .progress.blue .progress-left .progress-bar{ animation: loading-2 1.5s linear forwards 1.8s; } .progress.blue .progress-right .progress-bar{ animation: loading-2r 1.8s linear forwards; } .progress.blue .inner-circle{ animation: loading-6 3.8s ease forwards; } .progress.yellow .progress-bar{ border-color: #fdba04; } .progress.yellow .progress-value{ color: #fdba04; } .progress.yellow .progress-left .progress-bar{ animation: loading-3 1s linear forwards 1.8s; } .progress.yellow .progress-right .progress-bar{ animation: loading-3r 1.8s linear forwards; } .progress.yellow .inner-circle{ animation: loading-7 3.8s ease forwards; } .progress.pink .progress-bar{ border-color: #ed687c; } .progress.pink .progress-value{ color: #ed687c; } .progress.pink .progress-left .progress-bar{ animation: loading-4 0.4s linear forwards 1.8s; } .progress.pink .progress-right .progress-bar{ animation: loading-4r 1.8s linear forwards; } .progress.pink .inner-circle{ animation: loading-8 3.8s ease forwards; } .progress.green .progress-bar{ border-color: #1abc9c; } .progress.green .progress-value{ color: #1abc9c; } .progress.green .progress-left .progress-bar{ animation: loading-5 1.2s linear forwards 1.8s; } .progress.green .progress-right .progress-bar{ animation: loading-5r 1.8s linear forwards; } .progress.green .inner-circle{ animation: loading-9 3.8s ease forwards; } @keyframes loading-2r{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate({{ tj_1.du_right }}deg); } } @keyframes loading-2{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate({{ tj_1.du_left }}deg); } } @keyframes loading-3r{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate({{ tj_2.du_right }}deg); } } @keyframes loading-3{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(90deg); transform: rotate({{ tj_2.du_left }}deg); } } @keyframes loading-4r{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(36deg); transform: rotate({{ tj_3.du_right }}deg); } } @keyframes loading-4{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(36deg); transform: rotate({{ tj_3.du_left }}deg); } } @keyframes loading-5r{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(126deg); transform: rotate({{ tj_4.du_right }}deg); } } @keyframes loading-5{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(126deg); transform: rotate({{ tj_4.du_left }}deg); } } @keyframes loading-6{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate({{ tj_1.du }}deg); transform: rotate({{ tj_1.du }}deg); } } @keyframes loading-7{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate({{ tj_2.du }}deg); transform: rotate({{ tj_2.du }}deg); } } @keyframes loading-8{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate({{ tj_3.du }}deg); transform: rotate({{ tj_3.du }}deg); } } @keyframes loading-9{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate({{ tj_4.du }}deg); transform: rotate({{ tj_4.du }}deg); } } @media only screen and (max-width: 990px){ .progress{ margin-bottom: 20px; } } </style> </head> <body> <div class="row" style=";margin-top: 100px"> <div class="col-md-2 col-sm-6" > <div class="progress blue"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="inner-circle"></div> <div class="progress-value"><span>{{ tj_1.num }}</span></div> </div> <div style="text-align: center;margin-top: 5px">我是标题1 </div> </div> <div class="col-md-2 col-sm-6"> <div class="progress yellow"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="inner-circle"></div> <div class="progress-value"><span>{{ tj_2.num }}</span></div> </div> <div style="text-align: center;margin-top: 5px">我是标题2 </div> </div> <div class="col-md-2 col-sm-6"> <div class="progress pink"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="inner-circle"></div> <div class="progress-value"><span>{{ tj_3.num }}</span></div> </div> <div style="text-align: center;margin-top: 5px">我是标题3 </div> </div> <div class="col-md-2 col-sm-6"> <div class="progress green"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span> <div class="inner-circle"></div> <div class="progress-value"><span>{{ tj_4.num }}</span></div> </div> <div style="text-align: center;margin-top: 5px">我是标题4 </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.progress-value > span').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 3500, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } }); }); }); </script> </body> </html>
