CSS3进度条 和 HTML5 Canvas画圆环

看到一些高大上的进度条插件，然后想自己用CSS写。经过搜索资料之后，终于成功了。为了以后方便拿来用，或者复习。将代码贴出。

 

HTML代码：

只需要两个div，外面的为一个有border的div id为wd ，然后包裹一个小div id为percent，height为100%，宽度为wd的百分比（相对于父容器，percent的父容器为wd，如wd的宽度width为100px,percent的width设置为50%就是100*50%=50px）

<div class="wd">
            <div class="percent"></div>
</div>

CSS的代码如下：（兼容性需要考虑，因为懒就没有考虑到兼容性了，在Chrome 运行没问题）

.wd{
            width: 100%;
            height: 20px;
            background: #f5f5f5;
            border: 1px solid #9d9d9d;
            margin-bottom: 40px;
            border-radius: 4px;
            overflow: hidden;
            -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);
            -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
        }
        .percent{
            background: #337ab7;
            background-image: linear-gradient(-45deg,//这里为渐变
            rgba(255,255,255,.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,.2) 50%,
            rgba(255,255,255,.2) 75%,
            transparent 75%);
            background-size: 18px 18px;//该值后面的 请设置为进度条的高度因为有border 所以为18px
            height: 100%;
            width: 40%;//表示进度条在40%的位置
            -webkit-animation: all 1.5s linear infinite;//动画
            -o-animation: all 1.5s linear infinite;
            animation: all 1.5s linear infinite;

        }
       
        @keyframes all {//动画设置
            0%{
                background-position: 0 0;
            }

            100%{
                background-position: -10px -10px;
            }
        }

　　HTML5画圆环:\

HTML:

　

 <canvas id="bg" class="bg" >
            您的浏览器不支持 HTML5 canvas 标签。
        </canvas>

CSS

        .bg{
            width:300px ;height:300px;
            border: 1px solid red;
        }

JS代码：

 var c=document.getElementById("bg");
        var ctx=c.getContext("2d");
//        ctx.fillStyle = '#FF0000';
        ctx.strokeStyle='#99CC33';
        ctx.lineWidth=10.0;
//        ctx.lineCap = 'square';

        imd = ctx.getImageData(200 ,200 ,255, 200);
        var drow= function (curr) {
            ctx.putImageData(imd, 0, 0);
            ctx.beginPath();
            ctx.arc(95,60,50,-0.5*Math.PI,curr*2*Math.PI-0.5*Math.PI);
            ctx.moveTo(95,60);
            ctx.closePath();
            ctx.stroke();
        };
        var t=0;
        var lod= function (gos) {
            var te=setInterval(function () {
                if (t>gos){
                    clearInterval(te);
                }else{
                    drow(t);
                    t+=0.01;
                }
            },5)
        };
        lod(0.8);

　　JS：改动代码可以实现环形进度条

var c=document.getElementById("bg");
        var ctx=c.getContext("2d");
        var drow= function (curr) {


            ctx.clearRect(0,0, c.width, c.height);
            ctx.beginPath();
            ctx.strokeStyle='#333';
            ctx.lineWidth=13;
            ctx.arc(140,80,50,-0.5*Math.PI,1.5*Math.PI);
            ctx.moveTo(140,80);
            ctx.closePath();
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = '#99CC33';
            ctx.lineWidth=10;
            ctx.arc(140,80,50,-0.5*Math.PI,curr*2*Math.PI-0.5*Math.PI);
            ctx.moveTo(140,80);
            ctx.closePath();
            ctx.stroke();

            ctx.fillStyle="#f00";
            ctx.font="30px abc";
            text = Math.floor(curr*100)+"%";
            text_w = ctx.measureText(text).width;
            ctx.fillText(text,120,90);
        };
        var t=0;
        var lod= function (gos) {
            var te=setInterval(function () {
                if (t>gos){

                    clearInterval(te);
                }else{

                    t+=0.01;
                    drow(t);
                }

            },5)
        };
        lod(0.9);

　最后附上Dome地址啦http://runjs.cn/detail/8p1gmf9b

 

转载于:https://www.cnblogs.com/wohenxion/p/4651585.html