Skip to content
Orbit CSS radial UI composer

Dashboard

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-8 from-90"> <div class="satellite grow-5.5x right"> <div class="gravity-spot"> <div class="orbit-2 from-90"> <div class="satellite"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#FFFFFF"> <path d="M313.33-80q-14.16 0-23.75-9.58-9.58-9.59-9.58-23.75v-664q0-14.17 9.58-23.75 9.59-9.59 23.75-9.59H400V-880h160v69.33h86.67q14.16 0 23.75 9.59 9.58 9.58 9.58 23.75v664q0 14.16-9.58 23.75Q660.83-80 646.67-80H313.33Zm33.34-493.33h266.66V-744H346.67v170.67Z" /> </svg> <span> 63% </span> </div> </div> </div> </div> </div> <div class="satellite grow-5.5x left"> <div class="gravity-spot"> <div class="orbit-2 from-270"> <div class="satellite"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"> <path d="m280-400 200-200.67L680-400H280Z" /> </svg> <span> 12º </span> <span> 5º</span> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF"> <path d="M480-360 280-559.33h400L480-360Z" /> </svg> </div> </div> </div> </div> </div> </div> <div class="orbit-8"> <div class="satellite grow-8x at-center main"> <div class="capsule"> <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" class="sun"> <path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z" /> </svg> <span class="place"> Constanta | 12º </span> <span class="time">6:59</span> <span>SUN <span class="day">11</span> APR</span> </div> <div class="gravity-spot"> <div class="orbit-9"> <div class="satellite angle-90 base"></div> </div> </div> </div> </div> <div class="orbit-8 shrink-50"> <o-progress value="56" class="from-180 shrink-80"></o-progress> </div> <div class="orbit-8"> <div class="satellite grow-8x at-center base-frame"> <div class="gravity-spot"> <div class="orbit-8"> <div class="satellite quarter-outer-orbit angle-180 grow-4x base"> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

    body {
      font-family: "Jost", sans-serif;
      font-optical-sizing: auto;
      background-color: rgb(16, 16, 16) !important;
    }

    .main {
      border: 15px solid rgb(42, 45, 45);
      background-color: rgb(16, 16, 16);
      overflow: hidden;

    }

    .left,
    .right {
      border: 3px solid var(--o-cyan);
    }

    .base-frame {
      overflow: hidden;
    }

    .base {
      background-color: rgb(42, 45, 45);
      border-color: transparent;
    }

    .capsule {
      flex-direction: column;
      font-weight: 200;
      color: rgba(255, 255, 255, 0.548);
      font-size: 20px;
      text-align: center;
      line-height: 1;
    }

    .sun {
      fill: currentcolor;
      stroke-width: 20;
      stroke: rgb(16, 16, 16);
      margin-top: -50px;

    }

    .time {
      font-size: 100px;
      color: white;
      margin-bottom: 20px;
    }

    .day {
      vertical-align: sub;
      font-size: 40px;
    }

    .place {
      margin-bottom: 20px;
    }

    o-progress {
      --o-color: var(--o-cyan);
      --o-background-color: rgb(65, 71, 71);
    }

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-8 from-90">
      <div class="satellite grow-5.5x right">
        <div class="gravity-spot">
          <div class="orbit-2 from-90">
            <div class="satellite">
              <div class="capsule">
                <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px"
                  fill="#FFFFFF">
                  <path
                    d="M313.33-80q-14.16 0-23.75-9.58-9.58-9.59-9.58-23.75v-664q0-14.17 9.58-23.75 9.59-9.59 23.75-9.59H400V-880h160v69.33h86.67q14.16 0 23.75 9.59 9.58 9.58 9.58 23.75v664q0 14.16-9.58 23.75Q660.83-80 646.67-80H313.33Zm33.34-493.33h266.66V-744H346.67v170.67Z" />
                </svg>
                <span>
                  63%
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="satellite grow-5.5x left">
        <div class="gravity-spot">
          <div class="orbit-2 from-270">
            <div class="satellite">
              <div class="capsule">
                <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"
                  fill="#FFFFFF">
                  <path d="m280-400 200-200.67L680-400H280Z" />
                </svg>
                <span>
                  12º
                </span>
                <span> 5º</span>
                <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px"
                  fill="#FFFFFF">
                  <path d="M480-360 280-559.33h400L480-360Z" />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-8">
      <div class="satellite grow-8x at-center main">
        <div class="capsule">
          <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" class="sun">
            <path
              d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z" />
          </svg>
          <span class="place">
            Constanta | 12º
          </span>
          <span class="time">6:59</span>
          <span>SUN <span class="day">11</span> APR</span>
        </div>
        <div class="gravity-spot">
          <div class="orbit-9">
            <div class="satellite angle-90 base"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="orbit-8 shrink-50">
      <o-progress value="56" class="from-180 shrink-80"></o-progress>
    </div>
    <div class="orbit-8">
      <div class="satellite grow-8x at-center base-frame">
        <div class="gravity-spot">
          <div class="orbit-8">
            <div class="satellite quarter-outer-orbit angle-180 grow-4x base">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Codepen: link

Credits: This example is inspired on Pinterest

Show & Tell

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