CSSを使用して円形の進行状況バーを作成する方法は？
使用HTML创建基础结构，通过自定义属性--progress设置进度值；2. 利用CSS的conic-gradient根据--progress生成彩色扇形背景；3. 通过伪元素::before配合inset和border-radius裁剪出中心区域，形成环形；4. 可选添加带样式的span标签作为中心文字标签；5. 整体通过flex布局居中内容，实现一个纯CSS的圆形进度条，最终效果为一个75%绿色填充、25%灰色剩余的环形进度条，且可通过JavaScript动态更新进度值并实现动画效果。
Creating a circular progress bar with CSS involves combining HTML structure and CSS styling, often using CSS conic-gradient, clip-path, or pseudo-elements with border-radius tricks. One of the most modern and flexible approaches uses conic-gradient and background properties. Here’s how to do it step by step.
1. Basic Structure with HTML
Start with a simple container element that will represent the circle:
<div class="circular-progress" style="--progress: 75;"></div>
Here, we're using a custom CSS property --progress to control the fill level (75% in this case).
2. Styling the Circle with CSS
Use CSS to create the circular shape and apply the gradient based on the progress value.
.circular-progress {
width: 120px;
height: 120px;
border-radius: 50%;
background:
conic-gradient(
#4caf50 var(--progress),
#e0e0e0 var(--progress)
);
position: relative;
}This creates a pie-chart-like effect where the green color (#4caf50) fills up to the percentage defined by --progress, and the rest is gray (#e0e0e0).
But this fills the entire circle. To make it look like a ring, we need to mask the center.
3. Creating the Hollow Center (Ring Effect)
Use a pseudo-element or a clip-path to cut out the center and form a ring.
Option A: Using clip-path (Simpler)
.circular-progress {
width: 120px;
height: 120px;
border-radius: 50%;
background:
conic-gradient(
#4caf50 calc(var(--progress) * 1%),
#e0e0e0 calc(var(--progress) * 1%)
);
clip-path: inset(15px);
}clip-path: inset(15px) removes a margin from all sides, creating a ring. But this isn't perfectly centered or scalable.
Option B: Using a Pseudo-element (Recommended)
.circular-progress {
width: 120px;
height: 120px;
border-radius: 50%;
background:
conic-gradient(
#4caf50 calc(var(--progress) * 1%),
#e0e0e0 calc(var(--progress) * 1%)
);
position: relative;
}
.circular-progress::before {
content: '';
position: absolute;
inset: 15px; /* Controls thickness of the ring */
background: #fff; /* This masks the center */
border-radius: 50%;
}This method gives a clean ring. The inset: 15px creates a smaller circle inside, revealing only the outer ring.
4. Adding a Label (Optional)
You can add a text label in the center using another pseudo-element or a child element.
<div class="circular-progress" style="--progress: 60"> <span class="label">60%</span> </div>
.label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
}Make sure the parent has position: relative.
5. Full Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Progress Bar</title>
<style>
.circular-progress {
width: 120px;
height: 120px;
border-radius: 50%;
background: conic-gradient(
#4caf50 calc(var(--progress) * 1%),
#e0e0e0 calc(var(--progress) * 1%)
);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.circular-progress::before {
content: '';
position: absolute;
inset: 15px;
background: #fff;
border-radius: 50%;
}
.label {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
z-index: 1;
}
</style>
</head>
<body>
<div class="circular-progress" style="--progress: 75">
<span class="label">75%</span>
</div>
</body>
</html>Important Notes
- The
conic-gradientmethod is not supported in older browsers like Internet Explorer. - For dynamic updates, you can change
--progressvia JavaScript:document.querySelector('.circular-progress').style.setProperty('--progress', 90); - To animate the progress, use CSS transitions on
--progress— but note: CSS doesn't animate custom properties directly. You’ll need a workaround using@property(experimental) or JavaScript animation.
Alternative: Stroke-based (SVG) Method
While this question was about pure CSS, many developers use SVG for more control and animation support. But for a pure CSS solution, the conic-gradient + pseudo-element method is clean and effective.
That’s it. You now have a responsive, customizable circular progress bar using only HTML and CSS. Basically just a clever use of gradients and masking.
以上がCSSを使用して円形の進行状況バーを作成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSでポインターイベントプロパティを使用する方法
Sep 17, 2025 am 07:30 AM
pointer-events-eventsporpertyincssconstrolswhethernelementcanbetheTarget ofpointerevents.1.usepointer-events：nonetodisable interactionsionsionsionsionslikeclicksoversoverseepingtheelementはviseallyvisible.2.applyittooclaallowcliclowcliclavioturtuntowontuntuntointuentointyonelemenmen
画像がCSSで伸びたり縮小したりするのを防ぐ方法
Sep 21, 2025 am 12:04 AM
useObject-fitormax-widthwithheight：autotopreventimagedistortion; object-fitcontrolshowimagesfillcontainersは、asspectratios、andmax-width：100％; height：autoensuressivescaling withoutwithoutstretching。
純粋なCSSを使用してドロップダウンメニューを作成する方法
Sep 20, 2025 am 02:19 AM
HTMLとCSSを使用して、JavaScriptなしでドロップダウンメニューを作成します。 2。：Hover Pseudo-Classを介してSubmenuディスプレイをトリガーします。 3.ネストされたリストを使用して構造を構築し、CSSに非表示および吊り下げのあるディスプレイ効果を設定します。 4。視覚的なエクスペリエンスを向上させるために、トランジションアニメーションを追加できます。
CSSでボックスシャドウエフェクトを追加する方法
Sep 20, 2025 am 12:23 AM
usethebox-shadowpropertytoaddropshadows.definehorizontalandaldverticalOffsets、blur、spread、color、andoptionalinsetforinnershadows.multipleshadowsarecomma-separated.example：box-shadow：5px10px8pxrgba（0,0,0,0.3）;
CSSを使用して画像にフィルターを適用する方法
Sep 21, 2025 am 02:27 AM
thecsssfilterpropertyallowseasyimageStylingwithectslikeblur、brightness、andgrayscale.usefilter：filter-function（value）onimagesorbackgroundimages.commonfunctionsincludeblur（px）、輝度（％）、造影（％）、graycal（％）、hue（％）
CSSにグラデーションの背景を追加する方法
Sep 16, 2025 am 05:30 AM
CSS勾配の背景を追加するには、背景または背景イメージ属性を使用して、linear-gradient（）、radial-gradient（）などの関数と協力します。最初に勾配の種類を選択し、方向と色を設定すると、線形勾配（Toright、＃FF7E5F、＃FEB47B）などの色のドッキングポイント、形状、サイズ、その他のパラメーターを介して細かく制御できます。
CSSで円形画像を作成する方法は？
Sep 15, 2025 am 05:33 AM
ボーダーラジウスを使用してください：50％を使用して、幅と高さの画像を円に変え、オブジェクトフィットとアスペクト比を組み合わせて形状と作物を確保し、境界、影、その他のスタイルを追加して視覚効果を高めます。
CSSグリッドレイアウトでギャップを作成する方法は？
Sep 22, 2025 am 05:15 AM
GAP、ROW-GAP、または列-GAP属性を使用して、CSSGRIDレイアウトのグリッドアイテム間の間隔を作成します。ギャップは、1つまたは2つの長さの値を受け入れることができる行間隔を設定するための略語属性です。 row-gapと列ギャップは、行と列間の間隔、およびPX、REM、％などのサポートユニットを個別に制御します。
