.etheme-progress-bar { position: relative; line-height: 1; } .etheme-progress-bar-wrapper { max-width: var(--max-width, 200px); margin: 0 auto; } .etheme-progress-bar-text-wrapper { text-align: center; } .etheme-progress-bar-text-wrapper > span { display: block; } .etheme-progress-bar-text-wrapper > span:not(:last-child) { margin-bottom: var(--content-space, 5px); } .etheme-progress-bar-text-wrapper-middle > span { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etheme-progress-bar-value { font-size: 2rem; color: var(--progress-color-01, #008aff); font-weight: 700; } .etheme-progress-bar-value:after { content: attr(data-suffix); } .etheme-progress-bar-text { color: #000; } .etheme-progress-bar[data-type=circle] svg { position: relative; height: auto; max-width: 100%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width: 100%; overflow: hidden; border-radius: 50%; } .etheme-progress-bar[data-type=circle] svg circle { fill: none; stroke: var(--progress-color-01, #008AFF); stroke-dashoffset: 314.159265; stroke-width: var(--progress-weight, 3); } .etheme-progress-bar[data-type=circle] svg circle.incomplete { stroke: var(--progress-color-02, var(--progress-color-01, #008AFF)); opacity: var(--progress-color-2-opacity, 0.25); } .etheme-progress-bar[data-type=circle] svg circle.complete { stroke-dasharray: 314.159265; } .etheme-progress-bar[data-type=circle] .etheme-progress-bar-svg-wrapper { --svg-filler-position: calc(var(--progress-weight, 3) * .5px); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--progress-space, 0); } .etheme-progress-bar[data-type=circle] .etheme-progress-bar-svg-wrapper:after { content: ''; background: var(--progress-color-fill, none); position: absolute; top: var(--svg-filler-position, 0); left: var(--svg-filler-position, 0); right: var(--svg-filler-position, 0); bottom: var(--svg-filler-position, 0); border-radius: 50%; }