79 lines
1.6 KiB
SCSS
79 lines
1.6 KiB
SCSS
/* Progress bar css start */
|
|
.max-w-66 {
|
|
max-width: 66px;
|
|
}
|
|
.max-w-112 {
|
|
max-width: 112px;
|
|
}
|
|
|
|
.progress {
|
|
background-color: var(--neutral-200);
|
|
}
|
|
|
|
.progress-sm {
|
|
height: 8px;
|
|
}
|
|
|
|
/* animated bar */
|
|
.animated-bar {
|
|
animation-name: animateBar;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: linear;
|
|
animation-duration: 2s;
|
|
}
|
|
@keyframes animateBar {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
/* Progress bar css End */
|
|
|
|
|
|
/* Floating Label Css Start */
|
|
.floating-label {
|
|
transform: translateX(-25px);
|
|
left: 0;
|
|
top: 0;
|
|
animation-name: animateFloatingLabel;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: linear;
|
|
animation-duration: 2s;
|
|
}
|
|
@keyframes animateFloatingLabel {
|
|
from {
|
|
left: 0;
|
|
}
|
|
to {
|
|
left: var(--left-percentage);
|
|
}
|
|
}
|
|
/* Floating Label Css End */
|
|
|
|
|
|
/* Semi Circle Floating */
|
|
.barOverflow { /* Wraps the rotating .bar */
|
|
position: relative;
|
|
overflow: hidden; /* Comment this line to understand the trick */
|
|
width: inherit;
|
|
height: inherit; /* Half circle (overflow) */
|
|
margin-bottom: -14px; /* bring the numbers up */
|
|
}
|
|
.circleBar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc(100% + -2px);
|
|
height: calc(100% + 44px);
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 5px solid var(--primary-50); /* half gray, */
|
|
border-bottom-color: var(--primary-600); /* half azure */
|
|
border-right-color: var(--primary-600);
|
|
}
|
|
|
|
|
|
/* Semi Circle Floating */
|