Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="pie-timer deg-0"></div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@mixin simple-pie-chart($size, $current-value, $total-value, $chart-color: grey, $background-color: white) {
// Variables
$percentage: $current-value/$total-value;
position: relative;
width: $size;
height: $size;
%under-half-before {
left: $size/2;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
-webkit-transform-origin: left center;
transform-origin: left center;
};
%over-half-before {
left: 0;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-webkit-transform-origin: center center;
transform-origin: center center;
}
@for $i from 0 to 360 {
@if $i < 180 {
.deg-#{$i} {
@extend %under-half-before;
}
}
@else {
@extend %over-half-before;
}
}
&:before {
content: '';
position: absolute;
width: $size/2;
height: $size;
border-radius: $size/2 0 0 $size/2;
background: $chart-color;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-moz-transform: rotate(#{$percentage * 360}deg);
-ms-transform: rotate(#{$percentage * 360}deg);
-webkit-transform: rotate(#{$percentage * 360}deg);
-o-transform: rotate(#{$percentage * 360}deg);
transform: rotate(#{$percentage * 360}deg);
}
&.over-half:before {
left: 0;
}
&.under-half:before {
left: -$size/2;
}
&:after {
content: '';
position: absolute;
width: $size/2;
height: $size;
text-align: center;
line-height: $size;
}
&.under-half:after {
left: -$size/2;
background: $background-color;
outline: 1px solid $background-color;
box-shadow: none;
}
&.over-half:after {
left: $size/2;
text-indent: -$size/2;
background: $chart-color;
border-radius: 0 $size/2 $size/2 0;
}
}
// Chart
// 40/100 or 40%
.pie-timer {
@include simple-pie-chart(8em, 70, 100, #ccc, #f2ecdb);
}
body {
background: #f2ecdb;
}
.pie-timer {
position: relative;
width: 8em;
height: 8em;
}
.pie-timer .deg-0, .pie-timer .deg-1, .pie-timer .deg-2, .pie-timer .deg-3, .pie-timer .deg-4, .pie-timer .deg-5, .pie-timer .deg-6, .pie-timer .deg-7, .pie-timer .deg-8, .pie-timer .deg-9, .pie-timer .deg-10, .pie-timer .deg-11, .pie-timer .deg-12, .pie-timer .deg-13, .pie-timer .deg-14, .pie-timer .deg-15, .pie-timer .deg-16, .pie-timer .deg-17, .pie-timer .deg-18, .pie-timer .deg-19, .pie-timer .deg-20, .pie-timer .deg-21, .pie-timer .deg-22, .pie-timer .deg-23, .pie-timer .deg-24, .pie-timer .deg-25, .pie-timer .deg-26, .pie-timer .deg-27, .pie-timer .deg-28, .pie-timer .deg-29, .pie-timer .deg-30, .pie-timer .deg-31, .pie-timer .deg-32, .pie-timer .deg-33, .pie-timer .deg-34, .pie-timer .deg-35, .pie-timer .deg-36, .pie-timer .deg-37, .pie-timer .deg-38, .pie-timer .deg-39, .pie-timer .deg-40, .pie-timer .deg-41, .pie-timer .deg-42, .pie-timer .deg-43, .pie-timer .deg-44, .pie-timer .deg-45, .pie-timer .deg-46, .pie-timer .deg-47, .pie-timer .deg-48, .pie-timer .deg-49, .pie-timer .deg-50, .pie-timer .deg-51, .pie-timer .deg-52, .pie-timer .deg-53, .pie-timer .deg-54, .pie-timer .deg-55, .pie-timer .deg-56, .pie-timer .deg-57, .pie-timer .deg-58, .pie-timer .deg-59, .pie-timer .deg-60, .pie-timer .deg-61, .pie-timer .deg-62, .pie-timer .deg-63, .pie-timer .deg-64, .pie-timer .deg-65, .pie-timer .deg-66, .pie-timer .deg-67, .pie-timer .deg-68, .pie-timer .deg-69, .pie-timer .deg-70, .pie-timer .deg-71, .pie-timer .deg-72, .pie-timer .deg-73, .pie-timer .deg-74, .pie-timer .deg-75, .pie-timer .deg-76, .pie-timer .deg-77, .pie-timer .deg-78, .pie-timer .deg-79, .pie-timer .deg-80, .pie-timer .deg-81, .pie-timer .deg-82, .pie-timer .deg-83, .pie-timer .deg-84, .pie-timer .deg-85, .pie-timer .deg-86, .pie-timer .deg-87, .pie-timer .deg-88, .pie-timer .deg-89, .pie-timer .deg-90, .pie-timer .deg-91, .pie-timer .deg-92, .pie-timer .deg-93, .pie-timer .deg-94, .pie-timer .deg-95, .pie-timer .deg-96, .pie-timer .deg-97, .pie-timer .deg-98, .pie-timer .deg-99, .pie-timer .deg-100, .pie-timer .deg-101, .pie-timer .deg-102, .pie-timer .deg-103, .pie-timer .deg-104, .pie-timer .deg-105, .pie-timer .deg-106, .pie-timer .deg-107, .pie-timer .deg-108, .pie-timer .deg-109, .pie-timer .deg-110, .pie-timer .deg-111, .pie-timer .deg-112, .pie-timer .deg-113, .pie-timer .deg-114, .pie-timer .deg-115, .pie-timer .deg-116, .pie-timer .deg-117, .pie-timer .deg-118, .pie-timer .deg-119, .pie-timer .deg-120, .pie-timer .deg-121, .pie-timer .deg-122, .pie-timer .deg-123, .pie-timer .deg-124, .pie-timer .deg-125, .pie-timer .deg-126, .pie-timer .deg-127, .pie-timer .deg-128, .pie-timer .deg-129, .pie-timer .deg-130, .pie-timer .deg-131, .pie-timer .deg-132, .pie-timer .deg-133, .pie-timer .deg-134, .pie-timer .deg-135, .pie-timer .deg-136, .pie-timer .deg-137, .pie-timer .deg-138, .pie-timer .deg-139, .pie-timer .deg-140, .pie-timer .deg-141, .pie-timer .deg-142, .pie-timer .deg-143, .pie-timer .deg-144, .pie-timer .deg-145, .pie-timer .deg-146, .pie-timer .deg-147, .pie-timer .deg-148, .pie-timer .deg-149, .pie-timer .deg-150, .pie-timer .deg-151, .pie-timer .deg-152, .pie-timer .deg-153, .pie-timer .deg-154, .pie-timer .deg-155, .pie-timer .deg-156, .pie-timer .deg-157, .pie-timer .deg-158, .pie-timer .deg-159, .pie-timer .deg-160, .pie-timer .deg-161, .pie-timer .deg-162, .pie-timer .deg-163, .pie-timer .deg-164, .pie-timer .deg-165, .pie-timer .deg-166, .pie-timer .deg-167, .pie-timer .deg-168, .pie-timer .deg-169, .pie-timer .deg-170, .pie-timer .deg-171, .pie-timer .deg-172, .pie-timer .deg-173, .pie-timer .deg-174, .pie-timer .deg-175, .pie-timer .deg-176, .pie-timer .deg-177, .pie-timer .deg-178, .pie-timer .deg-179 {
left: 4em;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
-webkit-transform-origin: left center;
transform-origin: left center;
}
.pie-timer .pie-timer {
left: 0;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.pie-timer:before {
content: '';
position: absolute;
width: 4em;
height: 8em;
border-radius: 4em 0 0 4em;
background: #cccccc;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-moz-transform: rotate(252.0deg);
-ms-transform: rotate(252.0deg);
-webkit-transform: rotate(252.0deg);
-o-transform: rotate(252.0deg);
transform: rotate(252.0deg);
}
.pie-timer.over-half:before {
left: 0;
}
.pie-timer.under-half:before {
left: -4em;
}
.pie-timer:after {
content: '';
position: absolute;
width: 4em;
height: 8em;
text-align: center;
line-height: 8em;
}
.pie-timer.under-half:after {
left: -4em;
background: #f2ecdb;
outline: 1px solid #f2ecdb;
box-shadow: none;
}
.pie-timer.over-half:after {
left: 4em;
text-indent: -4em;
background: #cccccc;
border-radius: 0 4em 4em 0;
}
body {
background: #f2ecdb;
}
<div class="pie-timer deg-0"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.