Progress 进度条

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {

        var circle = new ProgressBar.Circle('#circle');
        circle.animate(0.6,{
            step: function(state,circle) {
                var value = Math.round(circle.value() * 100);
                circle.setText(value+'%');
            }
        });

    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {


       var circle01 = new ProgressBar.Circle('#circle01',{
            step: function(state,circle01) {
                var value = Math.round(circle01.value() * 100);
                circle01.setText(value+'%');
            }
        });
        circle01.animate(0.6);

        $('#cirBtn01').click(function () {
            circle01.animate(1);
        });
        $('#cirBtn01-b').click(function () {
            circle01.animate(0.6);
        });
        //
        var circle02 = new ProgressBar.Circle('#circle02', {
            from: { color: '#198cff' },
            to: { color: '#6619ff' },
            step: function(state, circle02, attachment) {
                circle02.path.setAttribute('stroke', state.color);
                var value = Math.round(circle02.value() * 100);
                circle02.setText(value+'%');
            }
        });
        circle02.animate(0.3);

        $('#cirBtn02').click(function () {
            circle02.animate(1, function () {
                circle02.setText('完成!');
                circle02.setClass('ax-success');
                circle02.text.style.color='#6619ff';
            });
        });
        $('#cirBtn02-b').click(function () {
            circle02.animate(0.3);
            circle02.reClass();
        });
        //
        var circle03 = new ProgressBar.Circle('#circle03', {
            step: function(state, circle03, attachment) {
                var value = Math.round(circle03.value() * 100);
                circle03.setText(value+'%');
            }
        });
        circle03.animate(0.6);

        $('#cirBtn03').click(function () {
            circle03.animate(1, function () {
                circle03.setText('<svg class="ax-svg"><use xlink:href="#ax-icon-check"></use></svg>');
                circle03.setClass('ax-success');
            });
        });
        $('#cirBtn03-b').click(function () {
            circle03.animate(0.6);
            circle03.reClass();
        });
        //
        var circle04 = new ProgressBar.Circle('#circle04', {
            step: function(state, circle04, attachment) {
                var value = Math.round(circle04.value() * 100);
                circle04.setText('<div class="ax-row01">加载进度</div><div class="ax-row02">'+value+'%</div>');
            }
        });
        circle04.animate(0.3);

        $('#cirBtn04').click(function () {
            circle04.animate(1, function () {
                circle04.setText('完成!');
                circle04.setClass('ax-success');
            });
        });
        $('#cirBtn04-b').click(function () {
            circle04.animate(0.3);
            circle04.reClass();
        });


    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {

        var circle05 = new ProgressBar.Circle('#circle05',{
            text:{
                autoStyleContainer: false,
            },
            step: function(state,circle05) {
                var value = Math.round(circle05.value() * 100);
                circle05.setText(value+'%');
            }
        });
        circle01.animate(0.6);
        $('#cirBtn05').click(function () {
            circle05.animate(1, function () {
                circle05.setText('完成!');
            });
        });
        $('#cirBtn05-b').click(function () {
            circle05.animate(0.3);
        });
    
    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {

    var line01 = new ProgressBar.Line('#line01',{
            step: function(state,line01) {
                var value = Math.round(line01.value() * 100);
                line01.setText(value+'%');
            }
        });
        line01.animate(0.6);

        $('#lineBtn01').click(function () {
            line01.animate(1);
        });
        $('#lineBtn01-b').click(function () {
            line01.animate(0.6);
        });
        //
        var line02 = new ProgressBar.Line('#line02', {
            from: { color: '#198cff' },
            to: { color: '#6619ff' },
            step: function(state, line02, attachment) {
                line02.path.setAttribute('stroke', state.color);
                var value = Math.round(line02.value() * 100);
                line02.setText(value+'%');
            }
        });
        line02.animate(0.3);

        $('#lineBtn02').click(function () {
            line02.animate(1, function () {
                line02.setText('完成!');
                line02.setClass('ax-success');
                line02.text.style.color='#6619ff';
            });
        });
        $('#lineBtn02-b').click(function () {
            line02.animate(0.3);
            line02.reClass();
        });
        //
        var line03 = new ProgressBar.Line('#line03', {
            step: function(state, line03, attachment) {
                var value = Math.round(line03.value() * 100);
                line03.setText(value+'%');
            }
        });
        line03.animate(0.6);

        $('#lineBtn03').click(function () {
            line03.animate(1, function () {
                line03.setText('<svg class="ax-svg"><use xlink:href="#ax-icon-check"></use></svg>');
                line03.setClass('ax-success');
            });
        });
        $('#lineBtn03-b').click(function () {
            line03.animate(0.6);
            line03.reClass();
        });


    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {

$('#semiBtn01').click(function () {
            semi01.animate(1);
        });
        $('#semiBtn01-b').click(function () {
            semi01.animate(0.6);
        });
        //
        var semi02 = new ProgressBar.SemiCircle('#semi02', {
            from: { color: '#198cff' },
            to: { color: '#6619ff' },
            step: function(state, semi02, attachment) {
                semi02.path.setAttribute('stroke', state.color);
                var value = Math.round(semi02.value() * 100);
                semi02.setText(value+'%');
            }
        });
        semi02.animate(0.3);

        $('#semiBtn02').click(function () {
            semi02.animate(1, function () {
                semi02.setText('完成!');
                semi02.setClass('ax-success');
                semi02.text.style.color='#6619ff';
            });
        });
        $('#semiBtn02-b').click(function () {
            semi02.animate(0.3);
            semi02.reClass();
        });
        //
        var semi03 = new ProgressBar.SemiCircle('#semi03', {
            step: function(state, semi03, attachment) {
                var value = Math.round(semi03.value() * 100);
                semi03.setText(value+'%');
            }
        });
        semi03.animate(0.6);

        $('#semiBtn03').click(function () {
            semi03.animate(1, function () {
                semi03.setText('');
                semi03.setClass('ax-success');
            });
        });
        $('#semiBtn03-b').click(function () {
            semi03.animate(0.6);
            semi03.reClass();
        });
        //
        var semi04 = new ProgressBar.SemiCircle('#semi04', {
            step: function(state, semi04, attachment) {
                var value = Math.round(semi04.value() * 100);
                semi04.setText('
加载进度
'+value+'%
');
            }
        });
        semi04.animate(0.3);

        $('#semiBtn04').click(function () {
            semi04.animate(1, function () {
                semi04.setText('完成!');
                semi04.setClass('ax-success');
            });
        });
        $('#semiBtn04-b').click(function () {
            semi04.animate(0.3);
            semi04.reClass();
        });

    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script type='text/javascript'>
    $(window).load(function () {

      var timeout = new ProgressBar.Circle('#timeout',
            {
                step: function(state, timeout, attachment) {
                    timeout.setClass('ax-rotate-360');
                }
            });

        timeout.set(0.05);
        setTimeout(function() {
            timeout.animate(0.2);
        }, 3000);
        setTimeout(function() {
            timeout.animate(0.4);
        }, 4000);
        setTimeout(function() {
            timeout.animate(1);
        }, 5000);

        $('#timeoutBtn').click(function () {
            timeout.set(0.05);
            setTimeout(function() {
                timeout.animate(0.2);
            }, 3000);
            setTimeout(function() {
                timeout.animate(0.4);
            }, 4000);
            setTimeout(function() {
                timeout.animate(1);
            }, 5000);
        });

    });
</script>
                        

<script src="https://src.axui.cn/v1.0/src/plugins/progressbar/progressbar.min.js"></script>
<script src="https://src.axui.cn/v1.0/src/plugins/jquery.validate/jquery.validate.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(window).load(function () {

         var strength = new ProgressBar.Circle('#strength');
        strength.set(0);
        strength.setText('弱');

        $("#vali").each(function(){

            //progress
            var weakColor = [255,132,0];
            var strongColor = [65, 163, 88];
            var defaultColor = [179,179, 179];

            function interpolateColor(rgbA, rgbB, value) {
                var rDiff = rgbA[0] - rgbB[0];
                var gDiff = rgbA[1] - rgbB[1];
                var bDiff = rgbA[2] - rgbB[2];
                value = 1 - value;
                return [
                    rgbB[0] + rDiff * value,
                    rgbB[1] + gDiff * value,
                    rgbB[2] + bDiff * value
                ];
            }

            function rgbArrayToString(rgb) {
                return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
            }

            function barColor(progress) {
                return interpolateColor(weakColor, strongColor, progress);
            }
            //

            var chaVal = 0;
            var upVal = 0;
            var lowVal = 0;
            var numVal = 0;
            var speVal = 0;
            var upperCase= new RegExp('[A-Z]');
            var lowerCase= new RegExp('[a-z]');
            var numbers = new RegExp('[0-9]');
            var specialchars = new RegExp('[^a-zA-Z0-9]');

            var thisForm = $(this);

            $.validator.addMethod('passwordCheck', function (value, element) {


                if (value.length >= 12) { chaVal = 1; } else { chaVal = 0; };
                if (value.match(upperCase)) { upVal = 1} else { upVal = 0; };
                if (value.match(lowerCase)) { lowVal = 1}  else { lowVal = 0; };
                if (value.match(numbers)) { numVal = 1}  else { numVal = 0; };
                if (value.match(specialchars)) { speVal = 1}  else { speVal = 0; };

                var total = chaVal + upVal + lowVal + numVal + speVal;

                //progress
                var progress=total / 3;
                var startColor = +strength.value().toFixed(2) === 0
                    ? rgbArrayToString(defaultColor)
                    : rgbArrayToString(barColor(strength.value()));

                var endColor = progress === 0
                    ? rgbArrayToString(defaultColor)
                    : rgbArrayToString(barColor(progress));
                var passwordGrades = {
                    0: '弱',
                    1: '弱',
                    2: '中',
                    3: '强',
                };
                //
                strength.animate(progress,{
                    from: { color: startColor },
                    to: { color: endColor },
                    step: function(state, strength) {
                        strength.setText(passwordGrades[total]);
                        strength.text.style.color=state.color;
                        strength.path.setAttribute('stroke', state.color);
                    }
                });
                //

                if (total == 0) {
                    $(element).data('error-msg',"<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 请输入密码</div>");
                    return false;
                } else if (value.length < 6 ){
                    $(element).data('error-msg',"<div class='ax-color-danger'><span class='ax-iconfont ax-icon-close-o-fill'></span> 密码长度不能小于 6 个字母</div>");
                    return false;
                }else if (total <= 1 && value.length >= 6) {
                    return true;
                } else if (total == 2 || total == 3 && value.length >= 6){
                    return true;
                } else if(total >= 4  && value.length >= 6){
                    return true;
                } else {
                    return true;
                }
                return true;

            }, function(params, element) {
                return $(element).data('error-msg');
            });

            thisForm.validate({
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent().parent());
                },
                debug:true,
                errorClass: "ax-valid",
                rules: {
                    password: {
                        passwordCheck:true,
                    }
                },
                success: function(label) {
                    label.removeClass("ax-color-danger").html("<div class='ax-color-primary'><span class='ax-iconfont ax-icon-check-o-fill'></span> 通过验证<span></span></div>");
                }
            });



        });


    });
</script>