G+ switcher Material Design

by Andrey Izman

HTML

<div class="switch-area">
  <label for="uname" class="switch-label">Get notified about new posts</label>
  <div id="uname" class="switch switch-flex" aria-label="Get notified about new posts" tabindex="0" role="checkbox" aria-checked="false">
    <div class="switch-pass"></div>
    <div class="switch-wave"></div>
    <div class="rbsY8b">
      <div class="E7QdY espmsb" jsname="IT5dJd"></div>
    </div>
  </div>
</div>

CSS

.switch-area {
    border-bottom: 1px solid rgba(0,0,0,0.12);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 16px;
    -webkit-box-direction: normal;
    box-direction: normal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.switch-label {
    -webkit-box-flex: 1 1;
    -webkit-flex: 1 1;
    flex: 1 1;
    margin-right: 8px;
}
.switch {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    outline: none;
    position: relative;
    vertical-align: middle;
    width: 37px;
    z-index: 0;
}

.switch-flex {
    -webkit-box-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.switch-pass {
    -webkit-transition: border-color .3s ease;
    transition: border-color .3s ease;
    border: 7px solid #b9b9b9;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    position: absolute;
    top: 3px;
    width: 23px;
}
.switch-wave {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    -webkit-transition: opacity .15s ease,left .3s ease;
    transition: opacity .15s ease,left .3s ease;
    background-color: rgba(0,0,0,0.2);
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 20px;
    left: 0;
    opacity: 0;
    outline: .1px solid transparent;
    pointer-events: none;
    position: absolute;
    width: 20px;
    z-index: -1;
}
.switch-slider {
    -webkit-transition: -webkit-transform .06s ease;
    transition: -webkit-transform .06s ease;
    -webkit-transition: transform .06s ease;
    transition: transform .06s ease;
}
.E7QdY {
    -webkit-transition: border-color .3s ease;
    transition:...

JavaScript

let t, cl = () => {t && clearTimeout(t)};
$(".switch").on("click", function() {
	let e = $(this), label = e.parent().children(".switch-label");
  const checked = e.attr("aria-checked") == 'true';
  if (checked) {
  	e.removeClass("circle-wave-green");
  	e.addClass("circle-wave");
  	e.removeClass("N2RpBe");
    label.removeClass("N2RpBe");
    e.attr("aria-checked", "false");
  	cl(); t = setTimeout(()=> {
  	  e.addClass("circle-wave-green");
  		e.removeClass("circle-wave");
    }, 270);
  } else {
  	e.addClass("circle-wave-green");
  	e.addClass("circle-wave");
  	e.addClass("N2RpBe");
    label.addClass("N2RpBe");
    e.attr("aria-checked", "true");
  	cl(); t = setTimeout(()=> {
  		e.removeClass("circle-wave");
    }, 270);
  }
});