Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Bourbon (v4.2.6)
// ----

@import "bourbon/bourbon"

$color-yellow: #fffe99
$color-green: #b6feb7
$color-gray: #4d4d4d
$color-gray-light: #999
$color-black: #070807
$color-blue: #b1fff8
$color-red: #fec6a8
$color-purple: #b584ff

$font-primary: "proxima-nova-soft", sans-serif

*, *:before, *:after
  box-sizing: border-box

html, body
  height: 100%
  margin: 0
  padding: 0
  width: 100%

body
  +background(linear-gradient(-45deg, $color-yellow, $color-green))

  // -webkit-font-smoothing: antialiased; 
  // -moz-osx-font-smoothing: grayscale;

.calorie-counter
  +background(linear-gradient(top left, $color-gray, #000))

  +animation(load 1s ease-out forwards)

  +transform(translate3d(-50%, -40%, 0))

  background-color: $color-gray
  border-radius: 4px
  box-shadow: 36px 36px 76px 0px rgba(#000, 0.26), 36px 36px 136px 0px rgba(#0b2b08, 1)
  color: #fff
  height: 640px
  font-family: $font-primary
  font-weight: 500
  left: 50%
  opacity: 0
  padding: 38px 46px
  position: absolute
  text-align: center
  top: 50%
  width: 400px

  &__title
    color: #666
    font-size: 18px
    margin-bottom: 10px

  &__date
    font-size: 22px
    margin-bottom: 50px

.chart
  svg
    height: 100%
    width: 100%

  &__background
    fill: none
    height: 100%
    position: relative
    stroke: #5a5a59
    stroke-width: 20px
    width: 100%

  &__foreground
    +transform(rotate(180deg))

    +transition(stroke-dashoffset 1s ease-in)

    fill: none
    height: 100%
    left: 0
    position: absolute
    stroke-dasharray: 630px
    stroke-dashoffset: 630px
    stroke-linecap: round
    stroke-width: 20px
    stroke: $color-green
    top: 0
    width: 100%

  &__count
    color: $color-gray-light
    font-size: 16px
    position: relative

    div
      color: #fff
      font-size: 22px

  .chart__container
    display: inline-block
    height: 100%
    position: relative
    width: 100%

  &--calorie
    .chart__container
      height: 220px
      width: 220px

    .chart__count
      top: -135px

  &--protein, &--carbs
    float: left
    margin-bottom: 50px
    text-align: left
    width: 50%

    .chart__container
      height: 30px
      width: 30px

    .chart__foreground
      stroke: $color-blue

    .chart__count
      color: $color-gray-light
      display: inline-block
      font-size: 14px
      padding-left: 10px
      position: relative
      text-align: left
      top: 2px
      overflow: hidden

      div
        color: #fff
        font-size: 14px

  &--carbs
    float: none
    overflow: hidden

    .chart__foreground
      stroke: $color-red

.calorie__count
  background-color: #b584ff
  padding: 23px

  &__consumed, &__remaining
    font-size: 16px

    span
      display: block
      font-size: 22px

  &__consumed
    overflow: hidden

  &__remaining
    background-color: #fff
    box-shadow: 19px 19px 49px 0px rgba(#000, 0.36)
    color: $color-gray
    float: right
    padding: 24px
    position: relative
    right: -15px
    top: -35px
    width: 60%

+keyframes(load)
  from
    +transform(translate3d(-50%, -40%, 0))

    opacity: 0

  to
    +transform(translate3d(-50%, -50%, 0))

    opacity: 1

SassMeister-output.css

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: -webkit-linear-gradient(-225deg, #fffe99, #b6feb7);
  background: linear-gradient(-45deg, #fffe99, #b6feb7);
}

.calorie-counter {
  background: -webkit-linear-gradient(top left, #4d4d4d, #000);
  background: linear-gradient(to bottom right, #4d4d4d, #000);
  -webkit-animation: load 1s ease-out forwards;
  -moz-animation: load 1s ease-out forwards;
  animation: load 1s ease-out forwards;
  -webkit-transform: translate3d(-50%, -40%, 0);
  -moz-transform: translate3d(-50%, -40%, 0);
  -ms-transform: translate3d(-50%, -40%, 0);
  -o-transform: translate3d(-50%, -40%, 0);
  transform: translate3d(-50%, -40%, 0);
  background-color: #4d4d4d;
  border-radius: 4px;
  box-shadow: 36px 36px 76px 0px rgba(0, 0, 0, 0.26), 36px 36px 136px 0px #0b2b08;
  color: #fff;
  height: 640px;
  font-family: "proxima-nova-soft", sans-serif;
  font-weight: 500;
  left: 50%;
  opacity: 0;
  padding: 38px 46px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 400px;
}
.calorie-counter__title {
  color: #666;
  font-size: 18px;
  margin-bottom: 10px;
}
.calorie-counter__date {
  font-size: 22px;
  margin-bottom: 50px;
}

.chart svg {
  height: 100%;
  width: 100%;
}
.chart__background {
  fill: none;
  height: 100%;
  position: relative;
  stroke: #5a5a59;
  stroke-width: 20px;
  width: 100%;
}
.chart__foreground {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: stroke-dashoffset 1s ease-in;
  -moz-transition: stroke-dashoffset 1s ease-in;
  transition: stroke-dashoffset 1s ease-in;
  fill: none;
  height: 100%;
  left: 0;
  position: absolute;
  stroke-dasharray: 630px;
  stroke-dashoffset: 630px;
  stroke-linecap: round;
  stroke-width: 20px;
  stroke: #b6feb7;
  top: 0;
  width: 100%;
}
.chart__count {
  color: #999;
  font-size: 16px;
  position: relative;
}
.chart__count div {
  color: #fff;
  font-size: 22px;
}
.chart .chart__container {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}
.chart--calorie .chart__container {
  height: 220px;
  width: 220px;
}
.chart--calorie .chart__count {
  top: -135px;
}
.chart--protein, .chart--carbs {
  float: left;
  margin-bottom: 50px;
  text-align: left;
  width: 50%;
}
.chart--protein .chart__container, .chart--carbs .chart__container {
  height: 30px;
  width: 30px;
}
.chart--protein .chart__foreground, .chart--carbs .chart__foreground {
  stroke: #b1fff8;
}
.chart--protein .chart__count, .chart--carbs .chart__count {
  color: #999;
  display: inline-block;
  font-size: 14px;
  padding-left: 10px;
  position: relative;
  text-align: left;
  top: 2px;
  overflow: hidden;
}
.chart--protein .chart__count div, .chart--carbs .chart__count div {
  color: #fff;
  font-size: 14px;
}
.chart--carbs {
  float: none;
  overflow: hidden;
}
.chart--carbs .chart__foreground {
  stroke: #fec6a8;
}

.calorie__count {
  background-color: #b584ff;
  padding: 23px;
}
.calorie__count__consumed, .calorie__count__remaining {
  font-size: 16px;
}
.calorie__count__consumed span, .calorie__count__remaining span {
  display: block;
  font-size: 22px;
}
.calorie__count__consumed {
  overflow: hidden;
}
.calorie__count__remaining {
  background-color: #fff;
  box-shadow: 19px 19px 49px 0px rgba(0, 0, 0, 0.36);
  color: #4d4d4d;
  float: right;
  padding: 24px;
  position: relative;
  right: -15px;
  top: -35px;
  width: 60%;
}

@-webkit-keyframes load {
  from {
    -webkit-transform: translate3d(-50%, -40%, 0);
    -moz-transform: translate3d(-50%, -40%, 0);
    -ms-transform: translate3d(-50%, -40%, 0);
    -o-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
@-moz-keyframes load {
  from {
    -webkit-transform: translate3d(-50%, -40%, 0);
    -moz-transform: translate3d(-50%, -40%, 0);
    -ms-transform: translate3d(-50%, -40%, 0);
    -o-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
@-o-keyframes load {
  from {
    -webkit-transform: translate3d(-50%, -40%, 0);
    -moz-transform: translate3d(-50%, -40%, 0);
    -ms-transform: translate3d(-50%, -40%, 0);
    -o-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
@keyframes load {
  from {
    -webkit-transform: translate3d(-50%, -40%, 0);
    -moz-transform: translate3d(-50%, -40%, 0);
    -ms-transform: translate3d(-50%, -40%, 0);
    -o-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}