jquery-pie-loader.scss

/* 
 *   jQuery Pie-Loader Plugin 0.1
 *
 *   Licensed under the MIT license:
 *   http://www.opensource.org/licenses/MIT
 */

// Base styles for every pie chart
%pie-base {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
  }

  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: Helvetica;
    font-size: 2rem;
    opacity: 0;
    transform: translate(-50%, -50%);

  }

  &.rendered {
    background: none;

    .percentage {
      opacity: 1;
    }
  }
}

// Custom styles for pie charts, 4 optional parameters
@mixin pie($text-color: hsla(0, 100%, 100%, 1), $base-color: hsla(210, 29%, 29%, 1), $fill-color: hsla(6, 78%, 57%, 1), $shadow: false) {

  @extend %pie-base;

  @if $shadow == "true" {
    $shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.36);
  }
  @else {
    $shadow: none;
  }
  
  background: $base-color;
  box-shadow: $shadow;

  circle:nth-child(1) {
    fill: $base-color;
  }

  circle:nth-child(2) {
    fill: $base-color;
    stroke: $fill-color;
  }

  .percentage {
    color: $text-color;
  }
}

// Default pie
.pie-loader {
  @include pie();
}