.wdt-progressbar-container
{
-webkit-transition: var(--wdt-elementor-base-transition);
transition: var(--wdt-elementor-base-transition);
}
.wdt-progressbar-container
{
position: relative;
display: flex;
}
.wdt-progressbar-container svg
{
width: auto;
height: 4px;
}
.wdt-progressbar-container .wdt-progressbar-value
{
line-height: 1;
position: absolute;
right: 0;
display: flex;
align-items: center;
font-size: var(--wdtFontSize_H5);
font-family: var(--wdtFontTypo_Alt); }
.wdt-progressbar-container .wdt-progressbar-value:after{
content: "";
position: absolute;
left: 100%;
transform: translate(-50%, -50%);
width: 11px;
height: 11px;
border-radius: 50%;
bottom: -27px;
background: var(--wdtPrimaryColor);
z-index: 6;
-webkit-animation: Progress 2s infinite linear; animation: Progress 2s infinite linear;
}
.wdt-dark-bg .wdt-progressbar-container .wdt-progressbar-value:after{
background: var(--wdtAccentTxtColor);
-webkit-animation: dark-Progress 2s infinite linear; 
animation: dark-Progress 2s infinite linear;
}
@keyframes Progress {
0% {
box-shadow: 0 0 0 0 rgba(var(--wdtPrimaryColorRgb), 0.2),
0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2);
-webkit-box-shadow: 0 0 0 0 rgba(var(--wdtPrimaryColorRgb), 0.2),
0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2);
}
100% {
box-shadow: 0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2),
0 0 0 10px rgba(var(--wdtPrimaryColorRgb), 0);
-webkit-box-shadow: 0 0 0 5px rgba(var(--wdtPrimaryColorRgb), 0.2),
0 0 0 10px rgba(var(--wdtPrimaryColorRgb), 0);
}
}
@keyframes dark-Progress {
0% {
box-shadow: 0 0 0 0 rgba(var(--wdtAccentTxtColorRgb), 0.2),
0 0 0 5px rgba(var(--wdtAccentTxtColorRgb), 0.2);
-webkit-box-shadow: 0 0 0 0 rgba(var(--wdtAccentTxtColorRgb), 0.2),
0 0 0 5px rgba(var(--wdtAccentTxtColorRgb), 0.2);
}
100% {
box-shadow: 0 0 0 5px rgba(var(--wdtAccentTxtColorRgb), 0.2),
0 0 0 10px rgba(var(--wdtAccentTxtColorRgb), 0);
-webkit-box-shadow: 0 0 0 5px rgba(var(--wdtAccentTxtColorRgb), 0.2),
0 0 0 10px rgba(var(--wdtAccentTxtColorRgb), 0);
}
} .wdt-progressbar-container.wdt-progressbar-horizontal
{
flex-direction: column;
}
.wdt-progressbar-container.wdt-progressbar-horizontal .wdt-progressbar-content
{
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.wdt-progressbar-container.wdt-progressbar-horizontal .wdt-progressbar-content .wdt-progressbar-title
{
line-height: 1;
width: 100%;
margin: 0 0 25px 0;
font-family: var(--wdtFontTypo_Alt);
font-size: var(--wdtFontSize_H4);
}
.wdt-progressbar-container.wdt-progressbar-horizontal .wdt-progressbar
{
position: relative;
width: 100%;
}
.wdt-progressbar-container.wdt-progressbar-horizontal.wdt-progressbar-content-floating .wdt-progressbar-value
{
right: auto;
transform: translateX(-100%);
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
z-index: 2;
}
.wdt-progressbar-container.wdt-progressbar-horizontal.wdt-progressbar-content-fixed-along .wdt-progressbar-value
{
z-index: 1;
bottom: 0;
margin: 0 0 0 15px;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
}
.wdt-progressbar-container.wdt-progressbar-horizontal.wdt-progressbar-content-fixed .wdt-progressbar-content
{
position: absolute;
z-index: 1;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.wdt-progressbar-container.wdt-progressbar-horizontal.wdt-progressbar-content-fixed .wdt-progressbar-content .wdt-progressbar-title
{
width: auto;
margin: 0 10px;
}
.wdt-progressbar-container.wdt-progressbar-horizontal.wdt-progressbar-content-fixed .wdt-progressbar-content .wdt-progressbar-value
{
position: relative;
} .wdt-progressbar-container.wdt-progressbar-circle .wdt-progressbar-value
{
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
padding: 0;
margin: 0;
} .wdt-progressbar-container.wdt-progressbar-semi-circle .wdt-progressbar-value
{
top: auto;
left: 0;
right: 0;
bottom: 0;
justify-content: center;
padding: 0;
margin: 0;
}