Hi,
How do I integrate in an Bubble HTML element the folowing SCSS+HTML :
Properly done we should end up displaying this radial indicator:
HTML:
<div class="pie pie--63 pie--disc">63%</div>
SCSS:
@mixin pie ($percent, $fgcolor, $bgcolor) {
background-image: linear-gradient(45+(3.6deg * $percent), $fgcolor 50%, $bgcolor 50%);
border-color: $bgcolor;
@if ($percent > 25) {
border-top-color: $fgcolor;
} @else {
border-top-color: rgba(0,0,0,0);
}
@if ($percent > 50) {
border-right-color: $fgcolor
} @elseif ($percent > 25) {
border-right-color: rgba(0,0,0,0);
}
@if ($percent > 75) {
border-bottom-color: $fgcolor
} @elseif ($percent > 50) {
border-bottom-color: rgba(0,0,0,0);
}
@if ($percent > 100) {
border-left-color: $fgcolor
} @elseif ($percent > 75) {
border-left-color: rgba(0,0,0,0);
}
}
body {
font:100%/1.5 georgia, arial;
}
.pie {
position: relative;
display: inline-block;
width: 100px;
text-align: center;
line-height: 100px;
font-size: 130%;
margin: 10px;
color: #fff;
&:before, &:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
}
&:before {
background-origin: border-box;
transform: rotate(45deg);
border-width: 50px;
border-style: solid;
}
}
.pie--disc {
color: #000;
}
.pie--disc:after {
background: #fff;
margin:15px;
}
.pie--15:before {
@include pie(15, #d44, #a11);
}
.pie--63:before {
@include pie(63, #fc3, #c80);
}
.pie--35:before {
@include pie(35, #ac0, #080);
}
.pie--79:before {
@include pie(79, #0ac, #058);
}
