Progress bar

Dashed progress bar


.satellite{
border-color: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4 gray-border">
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue-light)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue-lighter)"></o-arc>
      <o-arc class="gap-10" style="--o-color: var(--o-blue-lighter)"></o-arc>
    </div>
    <div class="orbit-0">
      <div class="satellite">
        <div class="capsule" style="font-size:30px; font-weight: bold; color: var(--o-blue-darker)">60</div>
      </div>
    </div>
  </div>
</div>

.satellite{
border-color: transparent
}

Basic progress with background


.satellite{
border-color: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4 gray-border">
      <o-progress value="60" shape="circle"
        style="--o-background-color: var(--o-purple-darker); --o-color: var(--o-purple)"></o-progress>
    </div>
    <div class="orbit-0">
      <div class="satellite">
        <div class="capsule" style="font-size:30px; font-weight: bold; color: var(--o-purple-darker)">60</div>
      </div>
    </div>
  </div>
</div>

.satellite{
border-color: transparent
}

Basic progress bar with circular indicator


.satellite{
border-color: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4 gray-border">
      <o-progress value="60" shape="circle" class="shrink-60"
        style="--o-background-color: var(--o-cyan-darker); --o-color: var(--o-cyan)"></o-progress>
      <div class="satellite angle-225" style="background-color: var(--o-cyan);"></div>
    </div>
    <div class="orbit-0">
      <div class="satellite">
        <div class="capsule" style="font-size:30px; font-weight: bold; color: var(--o-cyan-darker)">60</div>
      </div>
    </div>
  </div>
</div>

.satellite{
border-color: transparent
}

Multiple progress bars


.bigbang {
background: black
}
.satellite{
border-color: transparent
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-2 gray-border">
      <o-progress class="shrink-10" style="--o-color:  var(--o-cyan); " value="50" shape="circle"></o-progress>
    </div>
    <div class="orbit-3 gray-border">
      <o-progress class="shrink-10" style="--o-color:  hsl(146.02deg 100% 51%);" value="60" shape="circle"></o-progress>
    </div>
    <div class="orbit-4 gray-border">
      <o-progress class="shrink-10" style="font-size:30px; font-weight: bold; color: hsl(0deg 100% 60%);" value="70"
        shape="circle"></o-progress>
    </div>
  </div>
</div>

.bigbang {
background: black
}
.satellite{
border-color: transparent
}

Show & Tell

Join to our Github Discussion and show off what have you done with Orbit.