Edit
/* scss/Progress/_Theme-Progress.scss */
.theme-progress {
margin-bottom: 16px;
.progress-line {
width: 100%;
height: 8px;
background-color: $primary-50;
border-radius: 4px;
display: flex;
.progress-active {
background-color: $primary-600;
border-radius: 4px;
padding: 0 4px;
}
}
//percent on same line
&.percent-inline {
display: flex;
align-items: center;
.progress-line {
margin-inline-end: 15px;
}
.progress-percent {
@extend .text-sm;
}
}
// percent on other line
&.percent-block {
.progress-percent {
display: block;
text-align: end;
margin-top: 8px;
@extend .text-sm;
}
}
// percent on tooltip-top
&.tooltip-top {
margin-top: 44px;
.progress-line {
.progress-active {
position: relative;
.progress-percent {
position: absolute;
width: 50px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid #E4E7EC;
background: #fff;
font-size: 12px;
right: -21px;
bottom: 17px;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
html[dir="rtl"] & {
right: auto;
left: -21px;
}
&:after {
content: "";
width: 12px;
height: 12px;
background: white;
border-radius: 1px;
transform: rotate(45deg);
margin: -6px !important;
position: absolute;
bottom: 0;
}
}
}
}
}
// percent on tooltip-bottom
&.tooltip-bottom {
margin-bottom: 60px;
.progress-line {
.progress-active {
position: relative;
.progress-percent {
position: absolute;
width: 50px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid #E4E7EC;
background: #fff;
font-size: 12px;
right: -21px;
top: 17px;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
html[dir="rtl"] & {
right: auto;
left: -21px;
}
}
}
}
}
}
.theme-progress-circle {
width: 64px;
height: 64px;
background-color: #F1F5FE;
border-radius: 50%;
display: inline-block;
position: relative;
padding: 6px;
margin-bottom: 22px;
&:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: $primary-600;
border-radius: 50%;
content: '';
display: inline-block;
height: 100%;
width: 100%;
}
.progress-content {
border-radius: 50%;
position: relative;
z-index: 2;
background: #fff;
width: 100%;
height: 100%;
display: flex;
align-content: center;
flex-wrap: wrap;
text-align: center;
@extend .weight-m;
.progress-title {
width: 100%;
color: $gray-500;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
position: absolute;
bottom: -25px;
}
.progress-percent {
width: 100%;
@extend .text-sm;
color: $gray-900;
}
}
& {
&[data-progress="0"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(90deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="1"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(93.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="2"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(97.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="3"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(100.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="4"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(104.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="5"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(108deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="6"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(111.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="7"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(115.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="8"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(118.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="9"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(122.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="10"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(126deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="11"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(129.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="12"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(133.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="13"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(136.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="14"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(140.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="15"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(144deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="16"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(147.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="17"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(151.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="18"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(154.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="19"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(158.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="20"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(162deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="21"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(165.60000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="22"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(169.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="23"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(172.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="24"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(176.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="25"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="26"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(183.60000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="27"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(187.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="28"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(190.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="29"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(194.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="30"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(198deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="31"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(201.60000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="32"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(205.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="33"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(208.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="34"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(212.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="35"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(216deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="36"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(219.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="37"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(223.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="38"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(226.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="39"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(230.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="40"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(234deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="41"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(237.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="42"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(241.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="43"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(244.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="44"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(248.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="45"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(252deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="46"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(255.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="47"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(259.20000000000005deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="48"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(262.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="49"]:after {
background-image: linear-gradient(90deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(266.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="50"]:after {
background-image: linear-gradient(-90deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="51"]:after {
background-image: linear-gradient(-86.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="52"]:after {
background-image: linear-gradient(-82.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="53"]:after {
background-image: linear-gradient(-79.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="54"]:after {
background-image: linear-gradient(-75.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="55"]:after {
background-image: linear-gradient(-72deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="56"]:after {
background-image: linear-gradient(-68.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="57"]:after {
background-image: linear-gradient(-64.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="58"]:after {
background-image: linear-gradient(-61.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="59"]:after {
background-image: linear-gradient(-57.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="60"]:after {
background-image: linear-gradient(-54deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="61"]:after {
background-image: linear-gradient(-50.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="62"]:after {
background-image: linear-gradient(-46.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="63"]:after {
background-image: linear-gradient(-43.199999999999996deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="64"]:after {
background-image: linear-gradient(-39.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="65"]:after {
background-image: linear-gradient(-36deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="66"]:after {
background-image: linear-gradient(-32.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="67"]:after {
background-image: linear-gradient(-28.799999999999997deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="68"]:after {
background-image: linear-gradient(-25.200000000000003deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="69"]:after {
background-image: linear-gradient(-21.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="70"]:after {
background-image: linear-gradient(-18deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="71"]:after {
background-image: linear-gradient(-14.399999999999991deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="72"]:after {
background-image: linear-gradient(-10.799999999999997deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="73"]:after {
background-image: linear-gradient(-7.200000000000003deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="74"]:after {
background-image: linear-gradient(-3.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="75"]:after {
background-image: linear-gradient(0deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="76"]:after {
background-image: linear-gradient(3.600000000000009deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="77"]:after {
background-image: linear-gradient(7.200000000000003deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="78"]:after {
background-image: linear-gradient(10.799999999999997deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="79"]:after {
background-image: linear-gradient(14.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="80"]:after {
background-image: linear-gradient(18deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="81"]:after {
background-image: linear-gradient(21.60000000000001deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="82"]:after {
background-image: linear-gradient(25.200000000000003deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="83"]:after {
background-image: linear-gradient(28.799999999999997deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="84"]:after {
background-image: linear-gradient(32.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="85"]:after {
background-image: linear-gradient(36deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="86"]:after {
background-image: linear-gradient(39.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="87"]:after {
background-image: linear-gradient(43.20000000000002deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="88"]:after {
background-image: linear-gradient(46.80000000000001deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="89"]:after {
background-image: linear-gradient(50.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="90"]:after {
background-image: linear-gradient(54deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="91"]:after {
background-image: linear-gradient(57.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="92"]:after {
background-image: linear-gradient(61.20000000000002deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="93"]:after {
background-image: linear-gradient(64.80000000000001deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="94"]:after {
background-image: linear-gradient(68.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="95"]:after {
background-image: linear-gradient(72deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="96"]:after {
background-image: linear-gradient(75.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="97"]:after {
background-image: linear-gradient(79.20000000000002deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="98"]:after {
background-image: linear-gradient(82.80000000000001deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="99"]:after {
background-image: linear-gradient(86.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="100"]:after {
background-image: linear-gradient(90deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(270deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
}
// progress circle sizes
&.progress-circle-xs {
width: 160px;
height: 160px;
padding: 16px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
}
.progress-percent {
@extend .display-xs;
}
}
}
&.progress-circle-sm {
width: 200px;
height: 200px;
padding: 20px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
}
.progress-percent {
@extend .display-sm;
}
}
}
&.progress-circle-md {
width: 240px;
height: 240px;
padding: 24px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
@extend .text-sm;
}
.progress-percent {
@extend .display-md;
}
}
}
&.progress-circle-lg {
width: 280px;
height: 280px;
padding: 28px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
@extend .text-sm;
}
.progress-percent {
@extend .display-lg;
}
}
}
}
.half-circle-container {
display: inline-block;
height: 32px;
overflow: hidden;
.theme-progress-half-circle {
width: 64px;
height: 64px;
background-color: #F1F5FE;
border-radius: 50%;
display: inline-block;
position: relative;
padding: 6px;
margin-bottom: 22px;
&:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: $primary-600;
border-radius: 50%;
content: '';
display: inline-block;
height: 100%;
width: 100%;
}
.progress-content {
border-radius: 50%;
position: relative;
z-index: 2;
background: #fff;
width: 100%;
height: 100%;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
text-align: center;
padding: 12% 0;
@extend .weight-m;
.progress-title {
width: 100%;
color: $gray-500;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
position: absolute;
bottom: -25px;
padding: 0 17% !important;
}
.progress-percent {
width: 100%;
@extend .text-sm;
color: $gray-900;
}
}
& {
&[data-progress="0"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(0deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="1"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(1.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="2"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(3.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="3"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(5.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="4"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(7.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="5"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(9deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="6"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(10.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="7"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(12.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="8"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(14.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="9"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(16.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="10"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(18deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="11"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(19.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="12"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(21.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="13"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(23.400000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="14"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(25.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="15"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(27deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="16"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(28.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="17"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(30.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="18"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(32.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="19"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(34.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="20"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(36deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="21"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(37.800000000000004deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="22"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(39.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="23"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(41.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="24"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(43.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="25"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(45deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="26"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(46.800000000000004deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="27"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(48.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="28"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(50.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="29"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(52.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="30"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(54deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="31"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(55.800000000000004deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="32"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(57.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="33"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(59.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="34"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(61.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="35"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(63deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="36"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(64.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="37"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(66.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="38"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(68.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="39"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(70.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="40"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(72deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="41"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(73.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="42"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(75.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="43"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(77.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="44"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(79.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="45"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(81deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="46"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(82.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="47"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(84.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="48"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(86.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="49"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(88.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="50"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(90deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="51"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(91.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="52"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(93.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="53"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(95.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="54"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(97.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="55"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(99deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="56"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(100.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="57"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(102.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="58"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(104.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="59"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(106.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="60"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(108deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="61"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(109.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="62"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(111.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="63"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(113.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="64"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(115.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="65"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(117deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="66"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(118.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="67"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(120.60000000000001deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="68"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(122.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="69"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(124.2deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="70"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(126deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="71"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(127.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="72"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(129.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="73"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(131.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="74"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(133.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="75"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(135deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="76"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(136.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="77"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(138.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="78"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(140.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="79"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(142.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="80"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(144deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="81"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(145.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="82"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(147.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="83"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(149.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="84"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(151.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="85"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(153deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="86"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(154.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="87"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(156.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="88"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(158.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="89"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(160.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="90"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(162deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="91"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(163.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="92"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(165.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="93"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(167.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="94"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(169.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="95"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(171deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="96"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(172.8deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="97"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(174.6deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="98"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(176.4deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="99"]:after {
background-image: linear-gradient(0deg, $primary-50 50%, transparent 50%, transparent), linear-gradient(178.20000000000002deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="100"]:after {
background-image: linear-gradient(-180deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="101"]:after {
background-image: linear-gradient(-178.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="102"]:after {
background-image: linear-gradient(-176.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="103"]:after {
background-image: linear-gradient(-174.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="104"]:after {
background-image: linear-gradient(-172.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="105"]:after {
background-image: linear-gradient(-171deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="106"]:after {
background-image: linear-gradient(-169.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="107"]:after {
background-image: linear-gradient(-167.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="108"]:after {
background-image: linear-gradient(-165.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="109"]:after {
background-image: linear-gradient(-163.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="110"]:after {
background-image: linear-gradient(-162deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="111"]:after {
background-image: linear-gradient(-160.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="112"]:after {
background-image: linear-gradient(-158.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="113"]:after {
background-image: linear-gradient(-156.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="114"]:after {
background-image: linear-gradient(-154.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="115"]:after {
background-image: linear-gradient(-153deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="116"]:after {
background-image: linear-gradient(-151.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="117"]:after {
background-image: linear-gradient(-149.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="118"]:after {
background-image: linear-gradient(-147.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="119"]:after {
background-image: linear-gradient(-145.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="120"]:after {
background-image: linear-gradient(-144deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="121"]:after {
background-image: linear-gradient(-142.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="122"]:after {
background-image: linear-gradient(-140.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="123"]:after {
background-image: linear-gradient(-138.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="124"]:after {
background-image: linear-gradient(-136.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="125"]:after {
background-image: linear-gradient(-135deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="126"]:after {
background-image: linear-gradient(-133.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="127"]:after {
background-image: linear-gradient(-131.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="128"]:after {
background-image: linear-gradient(-129.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="129"]:after {
background-image: linear-gradient(-127.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="130"]:after {
background-image: linear-gradient(-126deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="131"]:after {
background-image: linear-gradient(-124.19999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="132"]:after {
background-image: linear-gradient(-122.4deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="133"]:after {
background-image: linear-gradient(-120.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="134"]:after {
background-image: linear-gradient(-118.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="135"]:after {
background-image: linear-gradient(-117deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="136"]:after {
background-image: linear-gradient(-115.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="137"]:after {
background-image: linear-gradient(-113.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="138"]:after {
background-image: linear-gradient(-111.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="139"]:after {
background-image: linear-gradient(-109.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="140"]:after {
background-image: linear-gradient(-108deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="141"]:after {
background-image: linear-gradient(-106.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="142"]:after {
background-image: linear-gradient(-104.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="143"]:after {
background-image: linear-gradient(-102.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="144"]:after {
background-image: linear-gradient(-100.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="145"]:after {
background-image: linear-gradient(-99deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="146"]:after {
background-image: linear-gradient(-97.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="147"]:after {
background-image: linear-gradient(-95.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="148"]:after {
background-image: linear-gradient(-93.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="149"]:after {
background-image: linear-gradient(-91.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="150"]:after {
background-image: linear-gradient(-90deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="151"]:after {
background-image: linear-gradient(-88.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="152"]:after {
background-image: linear-gradient(-86.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="153"]:after {
background-image: linear-gradient(-84.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="154"]:after {
background-image: linear-gradient(-82.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="155"]:after {
background-image: linear-gradient(-81deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="156"]:after {
background-image: linear-gradient(-79.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="157"]:after {
background-image: linear-gradient(-77.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="158"]:after {
background-image: linear-gradient(-75.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="159"]:after {
background-image: linear-gradient(-73.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="160"]:after {
background-image: linear-gradient(-72deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="161"]:after {
background-image: linear-gradient(-70.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="162"]:after {
background-image: linear-gradient(-68.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="163"]:after {
background-image: linear-gradient(-66.6deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="164"]:after {
background-image: linear-gradient(-64.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="165"]:after {
background-image: linear-gradient(-63deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="166"]:after {
background-image: linear-gradient(-61.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="167"]:after {
background-image: linear-gradient(-59.39999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="168"]:after {
background-image: linear-gradient(-57.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="169"]:after {
background-image: linear-gradient(-55.8deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="170"]:after {
background-image: linear-gradient(-54deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="171"]:after {
background-image: linear-gradient(-52.2deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="172"]:after {
background-image: linear-gradient(-50.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="173"]:after {
background-image: linear-gradient(-48.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="174"]:after {
background-image: linear-gradient(-46.79999999999998deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="175"]:after {
background-image: linear-gradient(-45deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="176"]:after {
background-image: linear-gradient(-43.19999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="177"]:after {
background-image: linear-gradient(-41.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="178"]:after {
background-image: linear-gradient(-39.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="179"]:after {
background-image: linear-gradient(-37.79999999999998deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="180"]:after {
background-image: linear-gradient(-36deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="181"]:after {
background-image: linear-gradient(-34.19999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="182"]:after {
background-image: linear-gradient(-32.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="183"]:after {
background-image: linear-gradient(-30.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="184"]:after {
background-image: linear-gradient(-28.799999999999983deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="185"]:after {
background-image: linear-gradient(-27deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="186"]:after {
background-image: linear-gradient(-25.19999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="187"]:after {
background-image: linear-gradient(-23.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="188"]:after {
background-image: linear-gradient(-21.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="189"]:after {
background-image: linear-gradient(-19.799999999999983deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="190"]:after {
background-image: linear-gradient(-18deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="191"]:after {
background-image: linear-gradient(-16.19999999999999deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="192"]:after {
background-image: linear-gradient(-14.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="193"]:after {
background-image: linear-gradient(-12.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="194"]:after {
background-image: linear-gradient(-10.799999999999983deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="195"]:after {
background-image: linear-gradient(-9deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="196"]:after {
background-image: linear-gradient(-7.199999999999989deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="197"]:after {
background-image: linear-gradient(-5.400000000000006deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="198"]:after {
background-image: linear-gradient(-3.599999999999994deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="199"]:after {
background-image: linear-gradient(-1.799999999999983deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
&[data-progress="200"]:after {
background-image: linear-gradient(0deg, $primary-600 50%, transparent 50%, transparent), linear-gradient(180deg, $primary-600 50%, $primary-50 50%, $primary-50);
}
}
}
// progress circle sizes
&.half-circle-container-xs {
height: 80px;
.theme-progress-half-circle {
width: 160px;
height: 160px;
padding: 16px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
}
.progress-percent {
@extend .display-xs;
}
}
}
}
&.half-circle-container-sm {
height: 100px;
.theme-progress-half-circle {
width: 200px;
height: 200px;
padding: 20px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
}
.progress-percent {
@extend .display-sm;
}
}
}
}
&.half-circle-container-md {
height: 120px;
.theme-progress-half-circle {
width: 240px;
height: 240px;
padding: 24px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
@extend .text-sm;
}
.progress-percent {
@extend .display-md;
}
}
}
}
&.half-circle-container-lg {
height: 140px;
.theme-progress-half-circle {
width: 280px;
height: 280px;
padding: 28px;
.progress-content {
.progress-title {
position: static;
padding: 0 5px;
@extend .text-sm;
}
.progress-percent {
@extend .display-lg;
}
}
}
}
}