Skip to content
staticview

Segmented Control Animated

Animate selected icons with the aria-checked state.

Code

The following example assumes that you have imported the component and set up the theme.

Basic Segmented Animated
<div class="segmented-control-container">
  <label for="color-scheme-control">Color Schema</label>


  <sv-segmented-control id="color-scheme-control" class="color-schema-segmented-control" value="auto">
    <button type="button" class="segmented-control-button" aria-label="light mode" title="Light Mode" value="light">
      <svg class="button-icon" aria-hidden="true" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
4 collapsed lines
        <path
          d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"
        ></path>
      </svg>
    </button>


    <button type="button" class="segmented-control-button" aria-label="follow system" title="Follow System" value="auto">
      <svg class="button-icon" aria-hidden="true" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
4 collapsed lines
        <path
          d="M312-320h64l32-92h146l32 92h62L512-680h-64L312-320Zm114-144 52-150h4l52 150H426Zm54 436L346-160H160v-186L28-480l132-134v-186h186l134-132 134 132h186v186l132 134-132 134v186H614L480-28Zm0-112 100-100h140v-140l100-100-100-100v-140H580L480-820 380-720H240v140L140-480l100 100v140h140l100 100Zm0-340Z"
        ></path>
      </svg>
    </button>


    <button type="button" class="segmented-control-button" aria-label="dark mode" title="Dark Mode" value="dark">
      <svg class="button-icon" aria-hidden="true" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
4 collapsed lines
        <path
          d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
        ></path>
      </svg>
    </button>
  </sv-segmented-control>
</div>


<style>
19 collapsed lines
  .segmented-control-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;


    .segmented-control-button {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      padding: 0.8em;


      .button-icon {
        display: block;
        block-size: 30px;
        fill: currentcolor;
      }


      /* Apply animation to the icon when the button is checked/selected */
      &[aria-checked="true"] .button-icon {
        animation: full-rotate 500ms ease;
      }
    }


    .color-schema-segmented-control {
      /* Rounded corners to make it look like a pill */
      --sv-bdr-rad-lg: 100px;


      /* Spacing between the buttons */
      &::part(container) {
        gap: 1em;
      }
3 collapsed lines
    }
  }


  @keyframes full-rotate {
    from {
      transform: rotate(0deg);
    }


    to {
      transform: rotate(360deg);
    }
  }
</style>