Inicia sesión



Gráficos circulares - pie charts en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en gráficos circulares - pie charts en CSS3...
Background:gradient, animation, SVG
<style>
  main{
    width: 100%;
    padding: 60px 0;
  }
  .chart{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 29px;
  }
  .chart > p{
    width: 199px;
  }
  .chart > div{
    width: 100px; 
    height: 100px;
    border-radius: 50%;
    background-color: #E8E2D6;
    background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
  }
  .chart:nth-of-type(1) div::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    transform: rotate(.3turn);
  }
  .chart:nth-of-type(2) div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    animation: pie-chart-spin1 3s linear 1.6 forwards,
                pie-chart-bg1 3s step-end 1 forwards;
  }
  .chart:nth-of-type(3) > div::before{
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    background-color: inherit;
    transform-origin: 0 50%;
    animation: pie-chart-spin1 3s linear 1.6 forwards,
                pie-chart-bg1 3s step-end 1 forwards;
  }
  .chart:nth-of-type(3) > div::before{
    animation-delay: -1.5s;
  }
  svg{
    width: 100px; height: 100px;
    transform: rotate(-90deg);
    background: #E8E2D6;
    border-radius: 50%;
  }
  .chart:nth-of-type(4) svg > circle{
    fill: #E8E2D6;
    stroke: #b4a078;
    stroke-width: 32;
    stroke-dasharray: 0 100;
    animation: pie-chart-fillup 6s linear infinite;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(1){
    fill: #fff;
    stroke: #b4a078;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 36% */
    stroke-dashoffset: -64;
    animation: pie-chart-per1 2s linear 1 forwards;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(2){
    fill: transparent; 
    stroke: #cabca0;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 32% */
    stroke-dashoffset: -32;
    animation: pie-chart-per2 2s linear 1 forwards;
  }
  .chart:nth-of-type(5) svg > circle:nth-of-type(3){
    fill: transparent; 
    stroke: #e1d9c9;
    stroke-width: 32;
    stroke-dasharray: 0 100; /* 32% */
    stroke-dashoffset: 0;
    animation: pie-chart-per3 2s linear 1 forwards;
  }
  @keyframes pie-chart-spin1 {
    to { transform: rotate(.5turn); }
  }
  @keyframes pie-chart-bg1 {
    to { background: #b4a078; }
  }
  @keyframes pie-chart-spin2 {
    to { transform: rotate(.5turn); }
  }
  @keyframes pie-chart-bg2 {
    50% { background: #b4a078; }
  }
  @keyframes pie-chart-fillup{
    to { stroke-dasharray: 100 100; }
  }
  @keyframes pie-chart-per1{
    to { stroke-dasharray: 37 100; }
  }
  @keyframes pie-chart-per2{
    to { stroke-dasharray: 32 100; }
  }
  @keyframes pie-chart-per3{
    to { stroke-dasharray: 32 100; }
  }
</style>

<main>
    <div class="chart">
      <p>① rotate()</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>② css animation</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>④ start animation from the specified location</p>
      <div class="pie"></div>
    </div>
    <div class="chart">
      <p>⑤ SVG change dasharray to percentage</p>
      <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16"></circle>
      </svg>
    </div>
    <div class="chart">
      <p>⑥ SVG add multiple colors</p>
      <svg viewBox="0 0 32 32">
        <circle r="16" cx="16" cy="16"></circle>
        <circle r="16" cx="16" cy="16"></circle>
        <circle r="16" cx="16" cy="16"></circle>
      </svg>
    </div>
</main>
Ver resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-09
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Trading en Tacones – Mujeres empoderadas con las inversiones

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-05
  • Categorias: Forex Noticias Tutorial

Como agregar un icono de Font Awesome en CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web @font-face WebSite webmasters Noticias Tutorial

Iconos sociales para Datalife engine y para cualquier sitio Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web Redes Sociales WebSite webmasters Noticias Tutorial

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial