No notes defined.

<div class="grid">
    <div class="col-1/4@tablet">
        <div class="pie-chart">
            <svg width="100%" height="100%" class="pie">
                <circle class="circle-1" r="50" cx="100" cy="100" style="stroke-dasharray: 59.85 315;"></circle>
                <circle class="circle-2" r="50" cx="100" cy="100" style="stroke-dasharray: 255.15 315; stroke-dashoffset: -59.85;"></circle>
                <circle class="circle-3" r="50" cx="100" cy="100" style="stroke-dasharray: 0 315; stroke-dashoffset: -315;"></circle>
            </svg>
        </div>
    </div>
    <div class="col-3/4@tablet">
        <div class="pie-chart_key">
            <span class="key-color key-1"></span>
            <span class="key-label"><strong>19%</strong> of time in lectures, seminars or similar</span>
        </div>
        <div class="pie-chart_key">
            <span class="key-color key-2"></span>
            <span class="key-label"><strong>81%</strong> of time in independent study</span>
        </div>
        <div class="pie-chart_key">
            <span class="key-color key-3"></span>
            <span class="key-label"><strong>0%</strong> of time in work based learning</span>
        </div>
    </div>
</div>
<div class="grid">
    <div class="col-1/4@tablet">
        <div class="pie-chart">
            <svg width="100%" height="100%" class="pie">
                <circle class="circle-1" r="50" cx="100" cy="100" style="stroke-dasharray: 59.85 315;"></circle>
                <circle class="circle-2" r="50" cx="100" cy="100" style="stroke-dasharray: 255.15 315; stroke-dashoffset: -59.85;"></circle>
                <circle class="circle-3" r="50" cx="100" cy="100" style="stroke-dasharray: 0 315; stroke-dashoffset: -315;"></circle>
            </svg>
        </div>
    </div>
    <div class="col-3/4@tablet">
        <div class="pie-chart_key">
            <span class="key-color key-1"></span>
            <span class="key-label"><strong>19%</strong> of time in lectures, seminars or similar</span>
        </div>
        <div class="pie-chart_key">
            <span class="key-color key-2"></span>
            <span class="key-label"><strong>81%</strong> of time in independent study</span>
        </div>
        <div class="pie-chart_key">
            <span class="key-color key-3"></span>
            <span class="key-label"><strong>0%</strong> of time in work based learning</span>
        </div>
    </div>
</div>
  • Content:
    .pie-chart {  
        .pie { transform: rotate(-90deg); width: 200px; height: 200px; background: #F4F4F4; border-radius: 50%; margin-bottom: 2rem; }
      
        .pie circle { fill: none; stroke: #F4F4F4; stroke-width: 99; -webkit-animation: rotate 1.5s ease-in; animation: rotate 1.5s ease-in; }
      
        .pie .circle-1 { stroke: #D20052; }
      
        .pie .circle-2 { stroke: #394851; }
      
        .pie .circle-3 { stroke: #C3C1C1; }
    
        &_key {
      
            margin: 0.5rem 0;
        
            & .key-color { display: inline-block; width: 17px; height: 17px; margin-right: 0.5rem; }
        
            & .key-color.key-1 { background: #D20052; }
        
            & .key-color.key-2 { background: #394851; }
        
            & .key-color.key-3 { background: #C3C1C1; }
    
        }
      
      }
  • URL: /components/raw/pie-chart/_pie-chart.scss
  • Filesystem Path: src\components\pie-chart\_pie-chart.scss
  • Size: 770 Bytes