圆环

圆环常用于进度、比例等图形，用.ring定义，表现为外圆环效果。

基本样式

圆环效果默认为从0到100的百分比值，同时需要定义属性data-ring的当前值value，值为JSON格式。

    <div id="ring" class="ring" data-ring='{"value":30}'></div>
    <script>
      $(function(){
        $("#ring").ring();
      })
    </script>

参数说明

除当前值外，还有其他圆环参数可定义。

参数	类型	默认值	说明
min	number	0	最小值
max	number	100	最大值
value	number	/	当前值，必须有。
unit	string	%	单位，当不为%时，则显示具体的数字。
delay	number	10	圆环速度，值越小越快。
finish	class	/	达到100%后的叠加的样式，一般为图标样式。
size	size	100px	圆环大小
bg	color	#fff	圆背景色
ring	color	#ddd	底圆环色
precent	color	主色值	百分比颜色
text	color	默认文本色	文字颜色

示例

    <div id="ringdemo" class="ring" data-ring='{"min":100,"max":200,"value":175,"unit":"个","size":"150px","bg":"#0ae","ring":"#2c7","precent":"#f60","text":"#fff","delay":5}'></div>

调用方法

    <script>
      $(function(){
        $("#ringdemo").ring();
      })
    </script>

交互演示

通过调用不同的数值，可改变圆环的显示效果，如下示例，不同的数值，改变圆环的颜色。

    <div id="ringdata" class="ring" data-ring='{"value":0}'></div>
    <script>
      $(function(){
        $("#ringdata").ring();
      })
    </script>

    <button class="button" data-value='{"value":0,"precent":"#0a8"}'>0</button>
    <button class="button" data-value='{"value":20,"precent":"#0a8"}'>20</button>
    <button class="button" data-value='{"value":40,"precent":"#2c7"}'>40</button>
    <button class="button" data-value='{"value":60,"precent":"#fc0"}'>60</button>
    <button class="button" data-value='{"value":80,"precent":"#f60"}'>80</button>
    <button class="button" data-value='{"value":100,"precent":"#f00","finish":"icon-success text-danger border-transparent"}'>100</button>
    <script>
      $(function(){
        $(".button").on("click",function(){
          var value = $.parseJSON($(this).attr("data-value"));
          $("#ringdata").ring(value);
        });
      })
    </script>