fix percentuali gauge
This commit is contained in:
zaccaria.majid
+1
-1
@@ -5,7 +5,7 @@ VisualStudioVersion = 17.4.33205.214
|
||||
MinimumVisualStudioVersion = 10.0.40219.1
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "GPW.CORE.Comp", "GPW.CORE.Comp\GPW.CORE.Comp.csproj", "{056826D6-6B88-42AA-AD09-FC380955834D}"
|
||||
EndProject
|
||||
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "GPW.CORE.Test", "GPW.CORE.Test\GPW.CORE.Test.csproj", "{9E5A3295-08BF-4603-9FA3-D38A2F1100E5}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "GPW.CORE.Test", "GPW.CORE.Test\GPW.CORE.Test.csproj", "{9E5A3295-08BF-4603-9FA3-D38A2F1100E5}"
|
||||
EndProject
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
||||
@@ -1,23 +1,9 @@
|
||||
<div class="bg-dark p-3">
|
||||
@*<div class="circle_box">
|
||||
<div>
|
||||
<svg>
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
</svg>
|
||||
<span>
|
||||
@Titolo
|
||||
<br />
|
||||
@Testo
|
||||
</span>
|
||||
</div>
|
||||
<strong>c++ developer</strong>
|
||||
</div>*@
|
||||
<div>
|
||||
<div class="circle_box">
|
||||
<div>
|
||||
<svg>
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
<circle cx="100" cy="100" r="70" />
|
||||
<circle class="@perc" cx="100" cy="100" r="70" />
|
||||
</svg>
|
||||
<span>
|
||||
@Titolo
|
||||
@@ -25,20 +11,5 @@
|
||||
@Testo
|
||||
</span>
|
||||
</div>
|
||||
@*<strong>note ulteriori</strong>*@
|
||||
</div>
|
||||
@*<div class="circle_box">
|
||||
<div>
|
||||
<svg>
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
<circle cx="100" cy="100" r="95" />
|
||||
</svg>
|
||||
<span>
|
||||
@Titolo
|
||||
<br />
|
||||
@Testo
|
||||
</span>
|
||||
</div>
|
||||
<strong>php developer</strong>
|
||||
</div>*@
|
||||
</div>
|
||||
@@ -17,5 +17,7 @@ namespace GPW.CORE.Comp
|
||||
public string CssTitolo { get; set; } = "";
|
||||
[Parameter]
|
||||
public string CssTesto { get; set; } = "";
|
||||
[Parameter]
|
||||
public string perc { get; set; } = "";
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
*,
|
||||
/*styling*/
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -8,7 +9,7 @@
|
||||
}
|
||||
body {
|
||||
/*font-family: arial;*/
|
||||
font-size: 12px;
|
||||
font-size: 9px;
|
||||
margin: 0;
|
||||
background: #122325;
|
||||
display: flex;
|
||||
@@ -25,46 +26,11 @@ svg {
|
||||
circle {
|
||||
stroke-width: 20px;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: width 2s;
|
||||
}
|
||||
/*circle:nth-child(1) {
|
||||
stroke: #fff
|
||||
}
|
||||
*/
|
||||
/*circle:nth-child(2) {
|
||||
stroke: #f00;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
*/
|
||||
.circle_box circle {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke: #fff;
|
||||
}
|
||||
.circle_box:nth-child(1) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 60) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
/*
|
||||
.circle_box:nth-child(2) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 75) / 100);
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(3) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 40) / 100);
|
||||
stroke: rgb(227, 241, 25);
|
||||
}*/
|
||||
.circle_box {
|
||||
font-size: 36px;
|
||||
font-size: 27px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -76,6 +42,720 @@ circle {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
color: #000;
|
||||
font-size: 27px;
|
||||
}
|
||||
.circle_box circle {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke: #ECF0F1;
|
||||
}
|
||||
/*styling*/
|
||||
.circle_box:nth-child(1) .p0:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 0) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p1:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 1) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p2:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 2) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p3:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 3) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p4:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 4) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p5:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 5) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p6:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 6) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p7:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 7) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p8:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 8) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p9:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 9) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p10:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 10) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p11:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 11) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p12:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 12) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p13:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 13) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p14:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 14) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p15:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 15) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p16:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 16) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p17:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 17) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p18:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 18) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p19:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 19) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p20:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 20) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p21:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 21) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p22:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 22) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p23:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 23) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p24:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 24) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p25:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 25) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p26:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 26) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p27:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 27) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p28:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 28) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p29:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 29) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p30:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 30) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p31:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 31) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p32:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 32) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p33:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 33) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p34:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 34) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p35:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 35) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p36:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 36) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p37:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 37) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p38:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 38) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p39:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 39) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p40:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 40) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p41:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 41) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p42:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 42) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p43:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 43) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p44:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 44) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p45:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 45) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p46:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 46) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p47:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 47) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p48:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 48) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p49:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 49) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p50:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 50) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p51:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 51) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p52:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 52) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p53:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 53) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p54:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 54) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p55:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 55) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p56:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 56) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p57:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 57) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p58:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 58) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p59:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 59) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p60:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 60) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p61:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 61) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p62:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 62) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p63:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 63) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p64:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 64) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p65:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 65) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p66:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 66) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p67:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 67) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p68:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 68) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p69:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 69) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p70:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 70) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p71:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 71) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p72:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 72) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p73:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 73) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p74:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 74) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p75:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 75) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p76:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 76) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p77:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 77) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p78:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 78) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p79:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 79) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p80:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 80) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p81:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 81) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p82:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 82) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p83:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 83) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p84:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 84) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p85:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 85) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p86:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 86) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p87:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 87) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p88:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 88) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p89:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 89) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p90:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 90) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p91:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 91) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p92:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 92) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p93:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 93) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p94:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 94) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p95:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 95) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p96:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 96) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p97:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 97) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p98:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 98) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p99:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 99) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
.circle_box:nth-child(1) .p100:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: #25e06d;
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
|
||||
@fontSize: 12px;
|
||||
@fontSize: 9px;
|
||||
@circleSize: 200px;
|
||||
|
||||
/*styling*/
|
||||
*, *:after, *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
@@ -30,47 +31,11 @@ svg {
|
||||
circle {
|
||||
stroke-width: (@circleSize/10);
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: width 2s;
|
||||
}
|
||||
|
||||
/*circle:nth-child(1) {
|
||||
stroke: #fff
|
||||
}
|
||||
*/
|
||||
/*circle:nth-child(2) {
|
||||
stroke: #f00;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
*/
|
||||
|
||||
.circle_box circle {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 60) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
/*
|
||||
.circle_box:nth-child(2) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 75) / 100);
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(3) circle:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 40) / 100);
|
||||
stroke: rgb(227, 241, 25);
|
||||
}*/
|
||||
|
||||
.circle_box {
|
||||
font-size: (@fontSize*3);
|
||||
@@ -87,6 +52,823 @@ circle {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
color: #000;
|
||||
font-size: (@fontSize*3);
|
||||
}
|
||||
.circle_box circle {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke: #ECF0F1;
|
||||
}
|
||||
|
||||
/*styling*/
|
||||
|
||||
.circle_box:nth-child(1) .p0:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 0) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p1:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 1) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p2:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 2) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p3:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 3) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p4:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 4) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p5:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 5) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p6:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 6) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p7:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 7) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p8:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 8) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p9:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 9) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p10:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 10) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p11:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 11) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p12:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 12) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p13:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 13) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p14:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 14) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p15:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 15) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p16:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 16) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p17:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 17) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p18:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 18) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p19:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 19) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p20:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 20) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p21:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 21) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p22:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 22) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p23:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 23) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p24:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 24) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p25:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 25) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p26:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 26) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p27:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 27) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p28:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 28) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p29:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 29) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p30:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 30) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p31:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 31) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p32:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 32) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p33:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 33) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p34:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 34) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p35:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 35) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p36:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 36) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p37:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 37) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p38:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 38) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p39:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 39) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p40:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 40) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p41:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 41) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p42:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 42) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p43:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 43) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p44:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 44) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p45:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 45) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p46:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 46) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p47:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 47) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p48:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 48) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p49:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 49) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p50:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 50) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p51:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 51) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p52:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 52) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p53:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 53) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p54:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 54) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p55:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 55) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p56:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 56) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p57:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 57) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p58:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 58) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p59:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 59) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p60:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 60) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p61:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 61) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p62:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 62) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p63:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 63) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p64:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 64) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p65:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 65) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p66:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 66) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p67:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 67) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p68:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 68) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p69:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 69) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p70:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 70) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p71:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 71) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p72:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 72) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p73:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 73) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p74:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 74) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p75:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 75) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p76:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 76) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p77:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 77) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p78:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 78) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p79:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 79) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p80:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 80) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p81:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 81) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p82:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 82) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p83:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 83) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p84:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 84) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p85:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 85) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p86:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 86) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p87:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 87) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p88:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 88) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p89:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 89) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p90:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 90) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p91:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 91) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p92:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 92) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p93:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 93) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p94:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 94) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p95:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 95) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p96:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 96) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p97:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 97) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p98:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 98) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p99:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 99) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
.circle_box:nth-child(1) .p100:nth-child(2) {
|
||||
stroke-dashoffset: calc(100 * 6);
|
||||
stroke-dasharray: calc(100 * 6);
|
||||
stroke-dashoffset: calc((100 * 6) - ((100 * 6) * 100) / 100);
|
||||
stroke-position: inside;
|
||||
stroke: rgb(37, 224, 109);
|
||||
}
|
||||
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
|
||||
<div class="cardContainer">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Globalization;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
||||
namespace GPW.CORE.Comp
|
||||
{
|
||||
public partial class DtCard
|
||||
{
|
||||
protected DateTime dtOggi = DateTime.Now;
|
||||
|
||||
string o = "";
|
||||
o = $"{dtOggi.ToString("dddd")} {dtOggi.ToString("")}";
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.cardContainer {
|
||||
background-color: aqua;
|
||||
height: 8.563rem;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.cardContainer {
|
||||
background-color: aqua;
|
||||
height: 8.563rem;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
.cardContainer{background-color:#0ff;height:8.563rem;border-radius:12px;margin-right:10px;}
|
||||
@@ -2,5 +2,9 @@
|
||||
{
|
||||
"outputFile": "CircleGauge.razor.css",
|
||||
"inputFile": "CircleGauge.razor.less"
|
||||
},
|
||||
{
|
||||
"outputFile": "dtCard.razor.css",
|
||||
"inputFile": "dtCard.razor.less"
|
||||
}
|
||||
]
|
||||
@@ -2,9 +2,15 @@
|
||||
|
||||
<PageTitle>Index</PageTitle>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
<DtCard></DtCard>
|
||||
|
||||
|
||||
|
||||
|
||||
<CircleGauge Titolo="9:00" Testo="caricate"></CircleGauge>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-lg-2">
|
||||
<div class="calendario">
|
||||
<div class="d-flex justify-content-between containerGauge">
|
||||
<CircleGauge Titolo="8:00" Testo="Caricate" perc="p100"></CircleGauge>
|
||||
<CircleGauge Titolo="4:00" Testo="Lavorate" perc="p50"></CircleGauge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
.calendario {
|
||||
background-color: #ff0000;
|
||||
border: 2px solid #000;
|
||||
height: 18.75rem;
|
||||
position: fixed;
|
||||
bottom: 1.875rem;
|
||||
width: 97%;
|
||||
right: 0.4rem;
|
||||
border-radius: 12px 12px 12px 12px
|
||||
}
|
||||
|
||||
|
||||
.containerGauge {
|
||||
position: fixed;
|
||||
bottom: 2.5rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
right: 0.35rem;
|
||||
}
|
||||
Reference in New Issue
Block a user