Steps to create a knob

Here you will learn the basis of Orbit by building a knob control.

1. Adding a bigbang.

   Bigbang class is a wrapper for your Orbit project. Only one Bigbang is needed for each Orbit project, or Orbit instance if you have multiples Orbits in same page.

   <div class="bigbang"> <!-- This element is invisible -->
   </div>

2. Adding a gravity-spot.

   A Gravity Spot is a container for orbits. Each Gravity Spot has a default size of 500px but can be easily adjusted to fit your project’s needs. Inside an Gravity Spot, radial elements will adhere to this size. For example, the maximum diameter of an orbit within this spot will be 500px.

   Metaphorically, a gravity spot is a gravitational center, and its size (500px), refers to its max gravitational force.

   <div class="bigbang">
       <div class="gravity-spot"> <!-- This element is invisible as well -->
       </div>
   </div>

3. Adding orbits.

   Within the Gravity Spot container, there are three ways to add orbits:

   1. Manually set orbit radius ranging from orbit-0 to orbit-24.
   2. Let Orbit determine orbits sizes using .orbit.
   3. By mixing 1 and 2.

   Note

   By default, orbit elements are transparent. To make them visible, you’ll need to specify a border-color.

   <div class="bigbang"> <div class="gravity-spot"> <div class="orbit"></div> <div class="orbit"></div> <div class="orbit"></div> <div class="orbit"></div> <div class="orbit-6"></div> </div> </div>

   
       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important
       }
   HTML

   <div class="bigbang">
           <div class="gravity-spot">
               <div class="orbit"></div>
               <div class="orbit"></div>
               <div class="orbit"></div>
               <div class="orbit"></div>
               <div class="orbit-6"></div>
           </div>
       </div>

   CSS

       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important
       }

4. Adding radial elements.

   Each orbit can contain radial elements such as satellites, slices, vectors, curved texts, progress indicators, and sides. These elements are evenly distributed along the orbit’s perimeter, allowing for detailed radial designs tailored to specific needs.

   <div class="bigbang"> <div class="gravity-spot"> <div class="orbit"> <div class="satellite"> <div class="capsule">volume</div> </div> </div> <div class="orbit-4"></div> <div class="orbit-5"></div> <div class="orbit-6"> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> </div> <div class="orbit-6"> <o-progress value="50"></o-progress> </div> </div> </div>

   
       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important}  
           
   .capsule {
       color: var(--o-cyan-darker) !important;  
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;  
   }
   .control-name, .control-selector {
       border: none !important
   }
   
       
   HTML

       <div class="bigbang">
           <div class="gravity-spot">
               <div class="orbit">
                   <div class="satellite">
                       <div class="capsule">volume</div>
                   </div>
               </div>
               <div class="orbit-4"></div>
               <div class="orbit-5"></div>
               <div class="orbit-6">
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
               </div>
               <div class="orbit-6">
                   <o-progress value="50"></o-progress>
               </div>
           </div>
       </div>

   CSS

       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important}
   
   .capsule {
       color: var(--o-cyan-darker) !important;
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;
   }
   .control-name, .control-selector {
       border: none !important
   }

5. Nesting gravity-spot.

   Gravity Spot can be nested within satellites, enabling the creation of complex radial structures.

   <div class="bigbang"> <div class="gravity-spot"> <div class="orbit"> <div class="satellite"> <div class="capsule">volume</div> </div> </div> <div class="orbit-4"> <div class="satellite"> <div class="gravity-spot"> <div class="orbit-1"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> </div> <div class="orbit-5"></div> <div class="orbit-6"> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> <div class="vector"></div> </div> <div class="orbit-6"> <o-progress value="50"></o-progress> </div> </div> </div>

   
       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important}  
           
   .capsule {
       color: var(--o-cyan-darker) !important;  
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;  
   }
   .control-name, .control-selector {
       border: none !important
   }
   
       
   HTML

       <div class="bigbang">
           <div class="gravity-spot">
               <div class="orbit">
                   <div class="satellite">
                       <div class="capsule">volume</div>
                   </div>
               </div>
               <div class="orbit-4">
                   <div class="satellite">
                       <div class="gravity-spot">
                           <div class="orbit-1">
                               <div class="side"></div>
                               <div class="side"></div>
                               <div class="side"></div>
                           </div>
                       </div>
                   </div>
               </div>
               <div class="orbit-5"></div>
               <div class="orbit-6">
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
                   <div class="vector"></div>
               </div>
               <div class="orbit-6">
                   <o-progress value="50"></o-progress>
               </div>
           </div>
       </div>

   CSS

       .orbit, [class*='orbit-'] {
           border: 1px dashed var(--o-cyan) !important}
   
   .capsule {
       color: var(--o-cyan-darker) !important;
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;
   }
   .control-name, .control-selector {
       border: none !important
   }

6. Customizing.

   There are numerous CSS class utilities to use with all Orbit elements. For instance, to distribute satellites within a range of 180 degrees, you can use the .range-180 class on the parent orbit element.

   In the example below, we used these CSS Utilities: .at-center, .shrink-*, .from-*, .range-*, and .outer-orbit

   The documentation provides a full, detailed explanation of all class utilities for each radial element.

   <div class="bigbang"> <div class="gravity-spot"> <div class="orbit"> <div class="satellite at-center control-name"> <div class="capsule">volume</div> </div> </div> <div class="orbit-4"> <div class="satellite control-selector"> <div class="gravity-spot"> <div class="orbit-1 shrink-30 from-90"> <div class="side"></div> <div class="side"></div> <div class="side"></div> </div> </div> </div> </div> <div class="orbit-5"></div> <div class="orbit-6 shrink-80 from-215 range-290 fit-range"> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> <div class="vector shrink-40 outer-orbit"></div> </div> <div class="orbit-6 orbit-6 from-215 range-290"> <o-progress value="50" shape="circle" class="shrink-60 outer-orbit"></o-progress> </div> </div> </div>

   
   .capsule {
       color: var(--o-cyan-darker) !important;  
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;  
   }
   .control-name, .control-selector {
       border: none !important
   }
   
   HTML

   <div class="bigbang">
       <div class="gravity-spot">
           <div class="orbit">
                <div class="satellite at-center control-name">
                   <div class="capsule">volume</div>
                </div>
           </div>
           <div class="orbit-4">
               <div class="satellite control-selector">
                   <div class="gravity-spot">
                       <div class="orbit-1 shrink-30 from-90">
                           <div class="side"></div>
                           <div class="side"></div>
                           <div class="side"></div>
                       </div>
                   </div>
               </div>
           </div>
           <div class="orbit-5"></div>
           <div class="orbit-6 shrink-80 from-215 range-290 fit-range">
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
               <div class="vector shrink-40 outer-orbit"></div>
           </div>
           <div class="orbit-6 orbit-6 from-215 range-290">
               <o-progress value="50" shape="circle" class="shrink-60 outer-orbit"></o-progress>
           </div>
       </div>
   </div>

   CSS

   .capsule {
       color: var(--o-cyan-darker) !important;
   }
   .vector, .side {
       height: 2px;
   }
   .vector {
       background-color: var(--o-cyan);
   }
   .side {
       background-color: var(--o-pink) !important ;
   }
   o-progress {
    --o-progress-color: var(--o-pink) !important;
   }
   .orbit-5 {
       border: 2px solid var(--o-cyan-dark) !important;
   }
   .control-name, .control-selector {
       border: none !important
   }