158 lines
3.4 KiB
Plaintext
158 lines
3.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CSS Donut Variants</title>
|
|
<style>
|
|
.donut {
|
|
--percentage: 65; /* Change this per chart */
|
|
--primary: #e63946; /* Fill color */
|
|
--track: #e9ecef; /* Background track */
|
|
--size: 120px; /* Default size */
|
|
--thickness: 20px; /* Default thickness */
|
|
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
var(--primary) calc(var(--percentage) * 1%),
|
|
var(--track) 0
|
|
);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.donut::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(var(--size) - var(--thickness));
|
|
height: calc(var(--size) - var(--thickness));
|
|
border-radius: 50%;
|
|
background: #fff; /* Inner cut-out */
|
|
}
|
|
|
|
.donut span {
|
|
position: absolute;
|
|
font-size: calc(var(--size) / 6);
|
|
}
|
|
|
|
/* Variants */
|
|
.donut.thin {
|
|
--size: 80px;
|
|
--thickness: 12px;
|
|
}
|
|
.donut.medium {
|
|
--size: 120px;
|
|
--thickness: 25px;
|
|
}
|
|
.donut.large {
|
|
--size: 180px;
|
|
--thickness: 35px;
|
|
}
|
|
|
|
|
|
.progress {
|
|
width: 100%;
|
|
background-color: #e9ecef;
|
|
border-radius: 0.375rem;
|
|
overflow: hidden;
|
|
height: 0.51rem; /* Default height */
|
|
|
|
margin-bottom: 1rem;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 0.375rem; /* Default size */
|
|
font-weight: 500;
|
|
}
|
|
|
|
.progress.thin {
|
|
height: 0.7rem;
|
|
font-size: 0.6rem;
|
|
|
|
}
|
|
.progress.medium {
|
|
height: 1rem;
|
|
font-size: 0.7rem;
|
|
|
|
|
|
}
|
|
|
|
.progress.large {
|
|
height: 1.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
|
|
background-color: #0d6efd; /* default = Bootstrap primary */
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
/* Color variants */
|
|
.progress-bar-success {
|
|
background-color: #198754;
|
|
}
|
|
.progress-bar-warning {
|
|
background-color: #ffc107;
|
|
color: #000;
|
|
}
|
|
.progress-bar-danger {
|
|
background-color: #dc3545;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="display:block; gap:40px; align-items:center; justify-content:center; min-height:100vh;">
|
|
<div style="
|
|
display: flex;
|
|
vertical-align: middle;
|
|
">
|
|
<!-- Thin -->
|
|
<div class="donut thin" style="--percentage: 45;">
|
|
<span>45%</span>
|
|
</div>
|
|
|
|
<!-- Medium -->
|
|
<div class="donut medium" style="--percentage: 73;">
|
|
<span>73%</span>
|
|
</div>
|
|
|
|
<!-- Large -->
|
|
<div class="donut large" style="--percentage: 90;">
|
|
<span>90%</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div style="
|
|
margin-top: 100px;
|
|
">
|
|
<div class="progress" style="width:200px">
|
|
<div class="progress-bar" style="width: 25%;">25%</div>
|
|
</div>
|
|
|
|
<div class="progress thin " style="width:200px">
|
|
<div class="progress-bar progress-bar-success" style="width: 50%;">50%</div>
|
|
</div>
|
|
|
|
<div class="progress medium" style="width:200px">
|
|
<div class="progress-bar progress-bar-warning" style="width: 75%;">75%</div>
|
|
</div>
|
|
|
|
<div class="progress large" style="width:50%">
|
|
<div class="progress-bar progress-bar-danger" style="width: 90%;">90%</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|