Compare commits
2 Commits
aa10161815
...
8637577466
| Author | SHA1 | Date |
|---|---|---|
 Juan Massuelles
|
8637577466 | 1 year ago |
|
Juan Massuelles
|
4b0ae3d6f3 | 1 year ago |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ;;ACApB,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
|
||||
"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,OAAkB;EACnC,aAAE;IACA,OAAO,EAAC,GAAG;IACX,MAAM,EAAC,CAAC;IACR,YAAY,EAAC,cAA0B;IACvC,OAAO,EAAE,YAAY;IACrB,wBAAa;MACX,YAAY,EAAC,IAAI;IAEnB,uGAAwC;MACtC,KAAK,EAAC,OAAe;;ACP3B,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
|
||||
"sources": ["_global.scss","_pie-charts-multipart.scss"],
|
||||
"names": [],
|
||||
"file": "pie-charts.css"
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
<div class="pie" style="--p:20"> 20%</div>
|
||||
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
|
||||
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
|
||||
<div class="pie animate no-round" style="--p:80;--c:orange;"> 80%</div>
|
||||
<div class="pie animate" style="--p:90;--c:lightgreen"> 90%</div>
|
||||
@property --p{
|
||||
syntax: '<number>';
|
||||
inherits: true;
|
||||
initial-value: 1;
|
||||
}
|
||||
|
||||
.pie {
|
||||
--p:20;
|
||||
--b:22px;
|
||||
--c:darkred;
|
||||
--w:150px;
|
||||
|
||||
width: var(--w);
|
||||
aspect-ratio: 1;
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
margin: 5px;
|
||||
place-content: center;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.pie:before,
|
||||
.pie:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.pie:before {
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
|
||||
conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
|
||||
-webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
|
||||
mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
|
||||
}
|
||||
.pie:after {
|
||||
inset: calc(50% - var(--b)/2);
|
||||
background: var(--c);
|
||||
transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
|
||||
}
|
||||
.animate {
|
||||
animation: p 1s .5s both;
|
||||
}
|
||||
.no-round:before {
|
||||
background-size: 0 0, auto;
|
||||
}
|
||||
.no-round:after {
|
||||
content: none;
|
||||
}
|
||||
@keyframes p{
|
||||
from{--p:0}
|
||||
}
|
||||
Binary file not shown.
@ -0,0 +1,97 @@
|
||||
|
||||
https://codepen.io/jh3y/pen/aQomdd
|
||||
|
||||
<div class="pie">
|
||||
<div class="pie__segment" style="--offset: 0; --value: 25; --bg: #db0a5b;"></div>
|
||||
<div class="pie__segment" style="--offset: 25; --value: 10; --bg: #22a7f0;"></div>
|
||||
<div class="pie__segment" style="--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;"></div>
|
||||
<div class="pie__segment" style="--offset: 95; --value: 5; --bg: #4d05e8;"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<label>Offset</label>
|
||||
<label>Value</label>
|
||||
<input type="number" min="0" max="360" step="1" value="0"/>
|
||||
<input type="number" min="0" max="360" step="1" value="25"/>
|
||||
<input type="number" min="0" max="360" step="1" value="25"/>
|
||||
<input type="number" min="0" max="360" step="1" value="10"/>
|
||||
<input type="number" min="0" max="360" step="1" value="35"/>
|
||||
<input type="number" min="0" max="360" step="1" value="60"/>
|
||||
<input type="number" min="0" max="360" step="1" value="95"/>
|
||||
<input type="number" min="0" max="360" step="1" value="5"/>
|
||||
</div>
|
||||
|
||||
.pie {
|
||||
border-radius: 100%;
|
||||
height: calc(var(--size, 200) * 1px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: calc(var(--size, 200) * 1px);
|
||||
}
|
||||
.pie__segment {
|
||||
--a: calc(var(--over50, 0) * -100%);
|
||||
--b: calc((1 + var(--over50, 0)) * 100%);
|
||||
--degrees: calc((var(--offset, 0) / 100) * 360);
|
||||
-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||||
clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
|
||||
transform-origin: 50% 100%;
|
||||
width: 100%;
|
||||
z-index: calc(1 + var(--over50));
|
||||
}
|
||||
.pie__segment:after,
|
||||
.pie__segment:before {
|
||||
background: var(--bg, #e74c3c);
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.pie__segment:before {
|
||||
--degrees: calc((var(--value, 45) / 100) * 360);
|
||||
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
.pie__segment:after {
|
||||
opacity: var(--over50, 0);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
align-items: center;
|
||||
background: #111;
|
||||
color: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
label {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
input {
|
||||
min-width: 80px;
|
||||
}
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-gap: 4px;
|
||||
grid-template-columns: auto auto;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
const pie = document.querySelector('.pie');
|
||||
const actions = document.querySelector('.actions');
|
||||
const segments = pie.children;
|
||||
|
||||
const updateSegment = e => {
|
||||
const idx = [...actions.children].indexOf(e.target);
|
||||
const key = idx % 2 === 0 ? 'offset' : 'value';
|
||||
const toUpdate = segments[Math.floor(idx / 2) - 1];
|
||||
toUpdate.style.setProperty(`--${key}`, e.target.value);
|
||||
};
|
||||
window.addEventListener('input', updateSegment);
|
||||
Binary file not shown.
Loading…
Reference in new issue