Простой круговой график

?> Обязательные знания: градиент, анимация, SVG

<script v-pre type="text/x-template" id="pie-chart">```markdown

<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(0.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; } ``````css chart:nth-of-type(5) svg > circle:nth-of-type(3) { fill: transparent; stroke: #e1d9c9; stroke-width: 32; stroke-dasharray: 0 100; /* 32% */ } ``` ```markdown <style> .pie { stroke-dashoffset: 0; animation: pie-chart-per3 2s linear 1 forwards; } @keyframes pie-chart-spin1 { to { transform: rotate(0.5turn); } } @keyframes pie-chart-bg1 { to { background: #b4a078; } } @keyframes pie-chart-spin2 { to { transform: rotate(0.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> <script> </script> </script> ```### Поддержка браузерами<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=svg&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>