o-progress Custom Element

<o-progress> is a standard web-component for rendering a radial progress bar. It has two elements: a progress bar and a background bar that show the max range progress bar can achieve.

Look and feel

Changing progress colors

To change o-progress progress bar color use CSS custom var --o-progress-color and --o-hover-progress-color in a o-progress style. Use --o-bg-color to set a background bar color.


o-progress.cyan {
--o-progress-color: var(--o-cyan-light);
--o-hover-progress-color: var(--o-cyan);
--o-bg-color: var(--o-cyan-dark);
}

o-progress:hover{
cursor: pointer
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-progress value="73" class="cyan"></o-progress>
  </div>
</div>

o-progress.cyan {
--o-progress-color: var(--o-cyan-light);
--o-hover-progress-color: var(--o-cyan);
--o-bg-color: var(--o-cyan-dark);
}

o-progress:hover{
cursor: pointer
}

Changing progress attributes

o-progress has special attributes:

value: To set a number that represents the progress bar value. Default 0
max: To set the max allowed value. Default 100


o-progress.cyan {
--o-progress-color: var(--o-cyan-light);
--o-hover-progress-color: var(--o-cyan);
--o-bg-color: var(--o-cyan-dark);
}
o-progress.indigo {
--o-progress-color: var(--o-indigo-light);
--o-hover-progress-color: var(--o-indigo);

}
o-progress:hover{
cursor: pointer
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-3">
      <o-progress value="25" class="cyan"></o-progress>
    </div>
    <div class="orbit-5">
      <o-progress value="50" max="80" class="indigo"></o-progress>
    </div>
</div>

o-progress.cyan {
--o-progress-color: var(--o-cyan-light);
--o-hover-progress-color: var(--o-cyan);
--o-bg-color: var(--o-cyan-dark);
}
o-progress.indigo {
--o-progress-color: var(--o-indigo-light);
--o-hover-progress-color: var(--o-indigo);

}
o-progress:hover{
cursor: pointer
}

Changing endings

o-progress has one special attribute: shape to define different endings. Currently, you can choose between circle, arrow, slash, backslash and zigzag shapes. Default none.


.wrapper {
border: 1px dotted var(--o-purple);
height: 100px;
width: 100px;
float: left;
overflow: hidden;
margin: 5px;
}
.gravity-spot {
--o-force: 300px
}
o-progress.purple-light {
--o-progress-color: var(--o-purple-light);
--o-hover-progress-color: var(--o-orange)
}
o-progress.purple {
--o-progress-color: var(--o-purple);
--o-hover-progress-color: var(--o-orange)
}
o-progress.purple-dark {
--o-progress-color: var(--o-purple-dark);
--o-hover-progress-color: var(--o-orange)
}
o-progress:hover{
cursor: pointer
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-progress value="60" class="grow-1x purple-light" shape="circle"></o-progress>
      </div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-progress value="60" class="grow-1x purple-light" shape="arrow"></o-progress>
      </div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-progress value="60" class="grow-1x purple-light" shape="zigzag"></o-progress>
      </div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-progress value="60" class="grow-1x purple-light" shape="slash"></o-progress>
      </div>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-3">
        <o-progress value="60" class="grow-1x purple-light" shape="backslash"></o-progress>
      </div>
    </div>
  </div>
</div>

.wrapper {
border: 1px dotted var(--o-purple);
height: 100px;
width: 100px;
float: left;
overflow: hidden;
margin: 5px;
}
.gravity-spot {
--o-force: 300px
}
o-progress.purple-light {
--o-progress-color: var(--o-purple-light);
--o-hover-progress-color: var(--o-orange)
}
o-progress.purple {
--o-progress-color: var(--o-purple);
--o-hover-progress-color: var(--o-orange)
}
o-progress.purple-dark {
--o-progress-color: var(--o-purple-dark);
--o-hover-progress-color: var(--o-orange)
}
o-progress:hover{
cursor: pointer
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

Adjust o-progress size

Each o-progress has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the vectors to shrink by a specified percentage.


.gravity-spot {
  --o-force: 330px;
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-1">
      <o-progress value="10" style="--o-progress-color: var(--o-red)"></o-progress>
    </div>
    <div class="orbit-2">
      <o-progress value="20" class="shrink-90" style="--o-progress-color: var(--o-orange)"></o-progress>
    </div>
    <div class="orbit-3">
      <o-progress value="30" class="shrink-80" style="--o-progress-color: var(--o-yellow)"></o-progress>
    </div>
    <div class="orbit-4">
      <o-progress value="40" class="shrink-70" style="--o-progress-color: var(--o-color)"></o-progress>
    </div>
    <div class="orbit-5">
      <o-progress value="50" class="shrink-60" style="--o-progress-color: var(--o-green)"></o-progress>
    </div>
    <div class="orbit-6">
      <o-progress value="60" class="shrink-50" style="--o-progress-color: var(--o-cyan)"></o-progress>
    </div>
    <div class="orbit-7">
      <o-progress value="70" class="shrink-40" style="--o-progress-color: var(--o-blue)"></o-progress>
    </div>
    <div class="orbit-8">
      <o-progress value="80" class="shrink-30" style="--o-progress-color: var(--o-indigo)"></o-progress>
    </div>
    <div class="orbit-9">
      <o-progress value="90" class="shrink-20" style="--o-progress-color: var(--o-purple)"></o-progress>
    </div>
    <div class="orbit-10">
      <o-progress value="100" class="shrink-10" style="--o-progress-color: var(--o-pink)"></o-progress>
    </div>

  </div>
</div>

.gravity-spot {
  --o-force: 330px;
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing vector to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.



.gravity-spot {
--o-force: 300px;
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-8">
      <o-progress value="80" class="grow-6x" style="--o-progress-color: var(--o-indigo)"></o-progress>
    </div>
    <div class="orbit-7">
      <o-progress value="70" class="grow-5x" style="--o-progress-color: var(--o-blue)"></o-progress>
    </div>
     <div class="orbit-6">
      <o-progress value="60" class="grow-4x" style="--o-progress-color: var(--o-cyan)"></o-progress>
    </div>
    <div class="orbit-5">
      <o-progress value="50" class="grow-2x" style="--o-progress-color: var(--o-purple-light)"></o-progress>
    </div>
  </div>
</div>

.gravity-spot {
--o-force: 300px;
}
o-progress {
--o-gap: 1; /* This will be added as default soon*/
}

Adjusting radial layout

Arbitrary o-progress angle.

.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.



.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-progress {
--o-progress-color: var(--o-purple);
}

HTML
CSS

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5 range-90">
      <o-progress value="33" class=" angle-115"></o-progress>
    </div>
  </div>
</div>

.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-progress {
--o-progress-color: var(--o-purple);
}

Relative o-progress orbital position

By default, o-progress is positioned in the middle of orbit path. To change that, there some CSS utilities:

.inner-orbit: To place ano-progress just below its orbit.

.outer-orbit: To place o-progress just above its orbit.

.quarter-inner-orbit: To place o-progress a 25% into its orbit.

.quarter-outer-orbit: To place o-progress a 25% outer its orbit.


.wrapper {
border: 1px dotted var(--o-purple);
height: 250px;
width: 250px;
float: left;
overflow: hidden;
margin: 5px;
}
[class*='orbit-'] {
  border: 1px dashed var(--o-cyan)
}
o-progress {
--o-progress-color: var(--o-pink);
--o-gap: 1; /* This will be added as default soon*/
}

HTML
CSS

  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-5">
        <o-progress value="33" class="outer-orbit "></o-progress>
      </div>
      <div class="orbit-4">
        <o-progress value="33" class="quarter-outer-orbit"></o-progress>
      </div>
      <div class="orbit-3">
        <o-progress value="33" class="quarter-inner-orbit"></o-progress>
      </div>
      <div class="orbit-2">
        <o-progress value="33" class="inner-orbit"></o-progress>
      </div>

  </div>

.wrapper {
border: 1px dotted var(--o-purple);
height: 250px;
width: 250px;
float: left;
overflow: hidden;
margin: 5px;
}
[class*='orbit-'] {
  border: 1px dashed var(--o-cyan)
}
o-progress {
--o-progress-color: var(--o-pink);
--o-gap: 1; /* This will be added as default soon*/
}