Skip to content
Orbit CSS radial UI composer

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.

  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.

  5. Nesting gravity-spot.

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

  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.