<div class="other-39">
<div class="other-39__bg"></div>
<div class="other-39__content"><svg class="other-39__line" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
<circle class="other-39__line-base" cx="96" cy="96" r="89"></circle>
<path class="other-39__line-value" d="M96 7C145.153 7 185 46.8467 185 96C185 145.153 145.153 185 96 185C46.8467 185 7 145.153 7 96C7 81.0551 10.6836 66.9705 17.1924 54.6047"></path>
</svg>
<div class="other-39__num"><span>00.0</span><span class="other-39__num-unit">%</span></div>
</div>
<div class="other-39__pop-container">
<div class="other-39__pop">名前が入ります</div>
</div>
<div class="other-39__cover">
<div class="other-39__cover-name">名前が入ります</div>
</div>
</div>
.other-39
.other-39__bg
.other-39__content
svg.other-39__line(viewBox="0 0 192 192", xmlns="http://www.w3.org/2000/svg")
circle.other-39__line-base(cx="96", cy="96", r="89")
path.other-39__line-value(d="M96 7C145.153 7 185 46.8467 185 96C185 145.153 145.153 185 96 185C46.8467 185 7 145.153 7 96C7 81.0551 10.6836 66.9705 17.1924 54.6047")
.other-39__num
span 00.0
span.other-39__num-unit %
.other-39__pop-container
.other-39__pop 名前が入ります
.other-39__cover
.other-39__cover-name 名前が入ります
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-39';
// 変数
$color_primary: #61d45d;
$color_secondary: #303560;
#{ $BLOCK_NAME } {
position: relative;
width: 220px;
height: 220px;
cursor: pointer;
padding: 20px;
margin-top: 60px;
&__bg {
position: absolute;
inset: 0;
background: $color_primary;
border-radius: 50%;
opacity: 0.2;
}
&__content {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
&__line {
fill: none;
}
&__line-base {
stroke: $color_secondary;
stroke-width: 14px;
}
&__line-value {
stroke: $color_primary;
stroke-width: 14px;
stroke-linecap: round;
stroke-dashoffset: 600px;
stroke-dasharray: 600px;
transition: stroke-dashoffset 1s;
@at-root #{ $BLOCK_NAME }:hover & {
stroke-dashoffset: 0px;
}
}
&__num {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 40px;
color: $color_secondary;
font-weight: bold;
line-height: 1;
gap: 4px;
}
&__num-unit {
font-size: 24px;
}
&__pop-container {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% - 4px);
z-index: 2;
display: flex;
justify-content: center;
}
&__pop {
position: relative;
background: $color_secondary;
color: #fff;
padding: 8px 20px;
border-radius: 9999px;
transition: all 0.3s;
transform: translateY(100px) rotate(90deg) scale(0);
@at-root #{ $BLOCK_NAME }:hover & {
transform: translateY(0) rotate(0) scale(1);
}
&::after {
position: absolute;
left: 0;
right: 0;
top: calc(100% - 1px);
content: '';
display: block;
width: 16px;
height: 12px;
background: $color_secondary;
margin: auto;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
}
&__cover {
position: absolute;
inset: 0;
background: $color_primary;
border-radius: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 0;
}
}
&__cover-name {
background: #fff;
line-height: 1;
padding: 8px 20px;
border-radius: 9999px;
color: $color_secondary;
font-weight: bold;
}
}