:host {
  --height: 100px; --border-width: 10px; --bg-background: transparent; --bg-circle-color: #cccccc; --fore-circle-color: #009900; --text-font-size: 14px; --text-color: #000000; --z-index: 100
}
.container {
  width: var(--height); height: var(--height); position: relative; z-index: var(--z-index)
}
.container div.bg {
  width: 100%; height: 100%; box-sizing: border-box; background: var(--bg-background); border: var(--border-width) var(--bg-circle-color) solid; border-radius: 100%
}
.container div.box {
  width: 100%; height: 100%; clip: rect(0px, var(--height), var(--height), calc(var(--height) / 2)); position: absolute; top: 0%; left: 0%; z-index: 100
}
.container div.box.full {
  clip: rect(auto, auto, auto, auto)
}
.container div.box span {
  display: block; width: 100%; height: 100%; box-sizing: border-box; border: var(--border-width) var(--fore-circle-color) solid; border-radius: 100%; clip: rect(0px, calc(var(--height) / 2), var(--height), 0px); position: absolute; top: 0%; left: 0%; z-index: 100
}
.container div.text {
  width: 100%; height: 100%; display: flex; font-size: var(--text-font-size); color: var(--text-color); justify-content: center; align-items: center; position: absolute; top: 0%; left: 0%; z-index: 110; pointer-events: none
}
.container div.text b {
  font-weight: normal
}
.container div.text em {
  font-style: normal
}