46 lines
958 B
Svelte
46 lines
958 B
Svelte
<script lang="ts">
|
|
export let percentage = 0
|
|
</script>
|
|
|
|
<div class="pie" style:--decimal={percentage}>
|
|
<div class="bg" />
|
|
<div class="slice" />
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
@property --decimal {
|
|
syntax: '<number>';
|
|
inherits: true;
|
|
initial-value: 0;
|
|
}
|
|
|
|
.pie {
|
|
--percentage: calc(var(--decimal) * 100%);
|
|
display: grid;
|
|
place-items: center;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
position: relative;
|
|
border-radius: 100%;
|
|
transition: --decimal cubic-bezier(0.075, 0.82, 0.165, 1) 500ms;
|
|
}
|
|
.bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--grey-500);
|
|
border-radius: 100%;
|
|
transition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 500ms;
|
|
}
|
|
.slice {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: conic-gradient(var(--red-400) 0%, var(--red-100) 100%);
|
|
mask-image: conic-gradient(
|
|
black 0deg var(--percentage),
|
|
transparent var(--percentage) 360deg
|
|
);
|
|
transform: scale(1.01);
|
|
border-radius: 100%;
|
|
}
|
|
</style>
|