Interactive Rotating Wheel - VueJS

In this example below you will see how to do a Interactive Rotating Wheel - VueJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by krystalcampioni, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright krystalcampioni ©
  • HTML
  • CSS
  • JavaScript
    .wrapper#app
  #steps.steps
    .steps__content(v-for="number in 6" :class="{'is-active': activeNumber == number}")
      .steps__icon {{ number }}
      .steps__description
        span {{ number }}
        #read-more
          a(href='#') Read more
          
    #steps-menu(:class="`step-${activeNumber}`")
      ul
        li(:class="{'is-active': activeNumber == number}" v-for="number in 6")
          a(href='#' @click="activeNumber = number") {{number}}


/*Downloaded from https://www.codeseek.co/krystalcampioni/interactive-rotating-wheel-vuejs-odyVoV */
    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

@mixin transitions($what: all, $length: 0.3s, $easing: ease-in-out) {
    -moz-transition:    $what $length $easing;
    -o-transition:      $what $length $easing;
    -webkit-transition: $what $length $easing;
    -ms-transition:     $what $length $easing;
    transition:         $what $length $easing;

}

$background-color: #FFB533;
$dark-color: #373232;
body {
  background: $background-color;
  font-size: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}
.wrapper {
  text-align: center;
  padding: 2em;
}
.steps {
  margin: 0 auto;
  height: 20em;
  list-style: none;
  width: 20em;
  z-index: 0;
  position: relative;
  color: #fff;
  border: 2px solid white;
  border-radius: 50%;
  
  &__content {
    display: none;
    
    &.is-active {
      display: block;
    }
  }
  
  &__icon {
    padding-top: 2.5em;
    width: 50%;
  }
  
  &__description {
    padding: 0em 4em;
    position: absolute;
    bottom: 2.5em;
    font-size: 0.9em;
    
    span {
      font-weight: bold;
      padding-right: 0.3em;
    }
    
    a {
      @include transitions(all, 0.5s);
      border: 1px solid $dark-color;
      border-radius: 0.2em;
      color: $dark-color;
      text-decoration: none;
      display: inline-block;
      padding: 0.2em 0.5em;
      margin-top: 0.6em;
      font-size: 0.9em;
      &:hover {
        border: 1px solid #fff;
        color: #fff;
        background: $dark-color;
      }
    }
  }
}

.is-active {
  a {
    font-size: 2em !important;
    background: $dark-color !important;
  }
}

#steps-menu {
   ul {
    li {
    @include transitions(all, 1.2s);
    border-left: 140px solid transparent;
    border-top: 1px solid transparent;
    font-size: 0.65em;
    left: 50%;
    list-style: none;
    position: absolute;
    top: 50%;
    transform-origin: 0 0;
      &:after{
        content: "v";
        // background: url("http://krystalcampioni.com/testes/arrow.png") red;
        width: 0.7em;
        height: 0.4em;
        margin-left: -0.14em;
        margin-top: -2.1em;
        position: absolute;
        font-size: 3.5em;
        background-size: 100%;
        background-color: transparent;
        transform: rotate(-29deg);
        background-repeat: no-repeat;
      }

      a {
        @include transitions(all, 0.5s);
        background: $background-color;
        color: #fff;
        text-decoration: none;
        position: absolute;
        border: 2px solid #fff;
        border-radius: 50%;
        text-align: center;
        height: 2em;
        width: 2em;
        font-size: 1.6em;
        line-height: 2;
        box-shadow: 0 0 0 0 transparent;
        &:hover {
        background: $dark-color;
        box-shadow: 0 0 0px 3px $dark-color;
        }
      }
    }
  }
}


$angle-list: step-1 -202, step-2 -144, step-3 -82, step-4 -22, step-5 38, step-6 96;

@each $step, $angle in $angle-list { // dentro da minha angle-list eu estou pegando o número da classe e o angulo referente

  .#{$step} {// aqui eu pego o número do step

    @for $i from 1 through 6 {
      $new-angle: (60*$i)-$angle; // 360/6 = 60 // rodo o círculo a quantidade de steps da iteração menos o angulo para corrigir a distancia para que fique sempre no topo

      ul li:nth-of-type(#{$i}) {
        transform: rotate(#{$new-angle}deg);
        a {
          transform: rotate(#{-$new-angle}deg);
        }
      }
    }
  }
}





.step-content {
    display: none;
}

#step-1 {
 display: block;
}



/*Downloaded from https://www.codeseek.co/krystalcampioni/interactive-rotating-wheel-vuejs-odyVoV */
    new Vue({
  el: '#app',
  data: {
    activeNumber: 1,
  },
})

    






Comments