CSS3を使用してリングプログレスバーを作成する例-CSSチュートリアル-php.cn

CSS3を使用してリングプログレスバーを作成する例

高洛峰

リリース： 2017-03-17 11:41:07

オリジナル

1534 人が閲覧しました

この記事では、CSS3 を使用してリングプログレスバーを作成する例を紹介します

最近、PC 側のプロジェクトではこのようなページを作成する必要があります。それ以外は非常に簡単で、重要なのはパーセンテージリングエフェクトです。私の最初の計画は、canvasを使用して直接実装することでした。キャンバス上に円を実装するのは非常に簡単だからです。

CSS3を使用してリングプログレスバーを作成する例

サークルを実装する Canvas のコードは以下に掲載されています。必要な場合は試してみてください。今日は主に css3 メソッドについて説明し、Canvas についてはこれ以上説明しません

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <canvas id="canvas" width="200" height="200"></canvas>  
    <script>  
            var canvas = document.getElementById(&#39;canvas&#39;);  
            var process = 0;  
            var context = canvas.getContext(&#39;2d&#39;);  
  
            // 画外圆  
            context.beginPath();  
            context.arc(100, 100, 80, 0, Math.PI*2);  
            context.closePath();  
            context.fillStyle = &#39;#666&#39;;  
            context.fill();  
  			drawCricle(context, process);
            
            function drawCricle(ctx, percent){  
                // 进度环  
                ctx.beginPath();  
                ctx.moveTo(100, 100);    
                ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));  
                ctx.closePath();  
                ctx.fillStyle = &#39;red&#39;;  
                ctx.fill();  
  
                // 内圆
                ctx.beginPath();  
                ctx.arc(100, 100, 75, 0, Math.PI * 2);  
                ctx.closePath();  
                ctx.fillStyle = &#39;white&#39;;  
                ctx.fill();  
  
                // 填充文字  
                ctx.font= "bold 30px microsoft yahei";   
                ctx.fillStyle = "black";  
                ctx.textAlign = "center";    
                ctx.textBaseline = &#39;middle&#39;;    
                ctx.moveTo(100, 100);    
                ctx.fillText(process + &#39;%&#39;, 100, 100);  
            }  
   
    </script>  
</body>  
</html>

ログイン後にコピー

。理由は、私がそれを使用しなかったためです。製品が今後多くのタスクがあると私に告げたので、99 を超えるタスクがあるかどうかを尋ねました。それは可能であり、上限を999に設定できると彼は言いました。

999 個のキャンバスリングを使用してレンダリングした場合。。。数百もあれば十分なので、css3 を使用するしかありません。少なくとも、はるかに高速になります。しかし、CSSで直接プログレスリングを描画する方法はないようです。

完全なコードは後ほど掲載しますが、ここでは大まかな構造を説明します。

CSSを使用してプログレスバーのスタイルを実現するには、回転アニメーションの読み込み効果が必要な場合は、異なるサイズの円を重ねて使用することしか考えられません。とても嬉しい、残念。。

まず、このような背景の円を作成する必要があります

CSS3を使用してリングプログレスバーを作成する例