:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.ppsv-progress { position: relative; font-size: var(--progress-font-size);}.ppsv-progress-linear { display: flex; align-items: center;}.ppsv-progress-linear__block { flex: 1; position: relative; overflow: hidden;}.ppsv-progress-linear__round { border-radius: 20px;}.ppsv-progress-linear__background,.ppsv-progress-linear__certain { width: 100%; height: 100%;}.ppsv-progress-linear__ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.ppsv-progress-linear__background { background-color: var(--progress-track-color);}.ppsv-progress-linear__certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.ppsv-progress-linear__label { flex: 0; margin-left: 8px;}.ppsv-progress-linear__label.left { margin-right: 8px; margin-left: 0;}.ppsv-progress-linear__pivot { margin-left: 0; position: absolute; top: 50%; box-sizing: border-box; min-width: 3.6em; padding: 0 5px; color: #fff; font-size: 10px; line-height: 1.6; text-align: center; background-color: var(--progress-background); word-break: keep-all; border-radius: 1em; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.ppsv-progress-circle { position: relative;}.ppsv-progress-circle__background { stroke: var(--progress-track-color);}.ppsv-progress-circle__certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.ppsv-progress-circle__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}