<div class="component--trial-box">
<h3>Free trial credit</h3>
<div class="credit">
<div class="circle-bar">
<svg width="72" height="72" id="elem1">
<circle cx="36" cy="36" r="33.5"></circle>
<circle cx="36" cy="36" r="33.5"></circle>
</svg>
</div>
<div>
<div class="amount">$249/$300</div>
<div class="text">Free trial credit</div>
</div>
</div>
<p>
You will not be billed durng your free trial.
To keep your projects running after the trial end, upgrade to a paid option.
</p>
<div class="action">
<a href="#" class="active">Upgrade</a>
<a href="#">Learn More</a>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
font-family: 'Mulish', sans-serif;
&:focus {
outline: 0;
}
}
body {
background: #F7F8FC;
display: grid;
place-items: center;
height: 100vh;
}
.component {
&--trial-box {
background: #fff;
box-shadow: 0 28px 30px -12px #E9ECF9;
padding: 55px 45px;
border-radius: 5px;
width: 566px;
h3 {
font-size: 22px;
font-weight: bold;
color: #10182F;
margin-bottom: 25px;
}
.credit {
display: flex;
align-items: center;
margin-bottom: 70px;
.circle-bar {
width: 72px;
height: 72px;
transform: rotate(-90deg);
margin-right: 20px;
svg {
//--circum: calc(2 * 3.14 * 33.5);
//--offset: calc(var(--circum) - (var(--circum) * 60 / 100));
circle {
fill: none;
stroke-width: 5;
stroke: #DAE1F5;
stroke-dasharray: var(--circum);
stroke-dashoffset: var(--circum);
stroke-linecap: round;
&:nth-child(1) {
stroke-dashoffset: 0;
}
&:nth-child(2) {
stroke: #345ACE;
animation: 1s animateOffset;
animation-fill-mode: forwards;
}
}
}
}
.amount {
font-size: 26px;
font-weight: bold;
color: #10182F;
}
.text {
font-size: 16px;
color: #545D7A;
}
}
p {
font-size: 16px;
line-height: 22px;
color: #10182F;
margin-bottom: 40px;
}
.action {
display: flex;
a {
margin-right: 15px;
height: 43px;
border: 2px solid #DAE1F5;
border-radius: 43px;
display: flex;
align-items: center;
padding: 0 35px;
font-size: 16px;
font-weight: bold;
color: #10182F;
transition: 300ms all;
&:hover {
border-color: #345ACE;
color: #345ACE;
}
&.active {
background: #10182F;
color: #fff;
border-color: #10182F;
&:hover {
border-color: #345ACE;
background: #345ACE;
}
}
}
}
}
}
@keyframes animateOffset {
to {
stroke-dashoffset: var(--offset);
}
}
function circleBar(elemId, percent){
let elem = document.getElementById(elemId);
let circles = elem.querySelectorAll('circle');
let r = circles[0].getAttribute('r');
let circum = 2 * Math.PI * r;
let offset = circum - (circum * percent / 100);
circles[1].style.setProperty('--circum', circum);
circles[1].style.setProperty('--offset', offset);
}
circleBar('elem1', 60);