Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Aproveite e inclui uma opção animando o stroke-dashoffset para vc ver como é fácil animar o gráfico apenas usando CSS com @keyframes

inserir a descrição da imagem aqui

Sego o código da imagem acima.

body {
  display: flex;
}

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
} 

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
  stroke-width: 12px;
  stroke: #ddd;
} 

.graph svg.cor {
  stroke: green;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;55;
  transform: rotate(-90deg);
  transform-origin: center;
}

.graph svg.cor-anim {
  stroke: red;
  stroke-dashoffset: 255;
  animation: anim 5s infinite;
}

@keyframes anim {
  45% {
    stroke-dashoffset: 55;
  }
  55% {
    stroke-dashoffset: 55;
  }
}
<div class="graph">
    <svg>
        <circle cx="50" cy="50" r="40"  />
    </svg>
    <svg class="cor">
        <circle cx="50" cy="50" r="40" />
    </svg>
    Btn
</div>
<div class="graph">
    <svg>
        <circle cx="50" cy="50" r="40" />
    </svg>
    <svg class="cor cor-anim">
        <circle cx="50" cy="50" r="40" />
    </svg>
    Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Sego o código da imagem acima.

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
  stroke-width: 12px;
  stroke: #ddd;
}
.graph svg.cor {
  stroke: green;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;
  transform: rotate(-90deg);
  transform-origin: center;
}

  
<div class="graph">
  <svg>
      <circle cx="50" cy="50" r="40"  />
  </svg>
  <svg class="cor">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Aproveite e inclui uma opção animando o stroke-dashoffset para vc ver como é fácil animar o gráfico apenas usando CSS com @keyframes

inserir a descrição da imagem aqui

Sego o código da imagem acima.

body {
  display: flex;
}

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
} 

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
  stroke-width: 12px;
  stroke: #ddd;
} 

.graph svg.cor {
  stroke: green;
  stroke-dasharray: 255;
  stroke-dashoffset: 55;
  transform: rotate(-90deg);
  transform-origin: center;
}

.graph svg.cor-anim {
  stroke: red;
  stroke-dashoffset: 255;
  animation: anim 5s infinite;
}

@keyframes anim {
  45% {
    stroke-dashoffset: 55;
  }
  55% {
    stroke-dashoffset: 55;
  }
}
<div class="graph">
    <svg>
        <circle cx="50" cy="50" r="40" />
    </svg>
    <svg class="cor">
        <circle cx="50" cy="50" r="40" />
    </svg>
    Btn
</div>
<div class="graph">
    <svg>
        <circle cx="50" cy="50" r="40" />
    </svg>
    <svg class="cor cor-anim">
        <circle cx="50" cy="50" r="40" />
    </svg>
    Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

revisão de informação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Sego o código da imagem acima.

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg,
svg circle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
}
.graph svg.base circle {
  stroke-width: #ddd;12px;
  stroke-width: 12px;#ddd;
}
.graph svg.cor circle {
  stroke: green;
  stroke-width: 12px;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;
  transform: rotate(-90deg);
  transform-origin: center;
}

  
<div class="graph">
  <svg class="base"><svg>
      <circle cx="50" cy="50" r="40"  />
  </svg>
  <svg class="cor">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Sego o código da imagem acima.

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg,
svg circle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
}
.graph svg.base circle {
  stroke: #ddd;
  stroke-width: 12px;
}
.graph svg.cor circle {
  stroke: green;
  stroke-width: 12px;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;
  transform: rotate(-90deg);
  transform-origin: center;
}

  
<div class="graph">
  <svg class="base">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  <svg class="cor">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Sego o código da imagem acima.

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
  stroke-width: 12px;
  stroke: #ddd;
}
.graph svg.cor {
  stroke: green;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;
  transform: rotate(-90deg);
  transform-origin: center;
}

  
<div class="graph">
  <svg>
      <circle cx="50" cy="50" r="40"  />
  </svg>
  <svg class="cor">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Sego o código da imagem acima.

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg,
svg circle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
}
.graph svg.base circle {
  stroke: #ddd;
  stroke-width: 12px;
}
.graph svg.cor circle {
  stroke: green;
  stroke-width: 12px;
  stroke-dasharray: 255;
  stroke-dashoffset: 66;
  transform: rotate(-90deg);
  transform-origin: center;
}

  
<div class="graph">
  <svg class="base">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  <svg class="cor">
      <circle cx="50" cy="50" r="40"  />
  </svg>
  Btn
</div>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em CSS

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?