<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div ng-app="app">
<div id="page" ng-controller="switch_ctrl">
<div class="switch">
<div class="s_wrapper">
<form action="" accept-charset="utf-8">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32.323975mm" height="32.323978mm" viewBox="0 0 114.53377 114.53378" class="switch_bubble" version="1.1">
<defs id="defs4"/>
<metadata id="metadata7"/>
<g id="layer1" transform="translate(-260.81948,-491.03328)">
<path d="m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z" id="path4136" fill="#000"/>
</g>
</svg>
<label>
<input type="radio" name="area" ng-model="action.mode" value="view" ng-change="bubblisity()">
<md-icon>
view_list
</md-icon>
</label>
<label>
<input type="radio" name="area" ng-model="action.mode" value="edit" ng-change="bubblisity()">
<md-icon>
settings
</md-icon>
</label>
</form>
</div>
</div>
</div>
</div>
<footer>
<div>
Based on <a href="https://dribbble.com/shots/2440217-Fluid-Switch" target="_blank">Leonardo Zakour</a> creation
</div>
</footer>
<script>
var app = angular.module('app', ['ngMaterial']);
app.controller('switch_ctrl', ['$scope', '$element', function($, iElm){
$.bubble = iElm[0].querySelector('.switch_bubble');
$.action = {
mode: "view"
};
$.bubblisity = function() {
var goo_r = "m374.46898 548.22101c0 31.09552-23.46384 46.8216-48.30342 42.30342-14.47387-2.63271-45.5056-19.85157-65.44189-27.20312-22.20319-8.18748-40.86153 1.28386-40.86153-15.1003 0-16.48716 18.89368-7.0702 41.28072-15.25421 19.8359-7.25139 50.60538-24.69441 65.0227-27.04921 25.53469-4.17062 48.30342 11.2079 48.30342 42.30342z",
goo_l = "m261.51459 548.22101c0 31.09552 25.46384 40.8216 50.30342 36.30342 14.47387-2.63271 43.5056-13.85157 63.44189-21.20312 22.20319-8.18748 40.86153 1.28386 40.86153-15.1003 0-16.48716-18.89368-7.0702-41.28072-15.25421-19.8359-7.25139-48.60538-18.69441-63.0227-21.04921-25.53469-4.17062-50.30342 5.2079-50.30342 36.30342z",
ungoo = "m375.35325 548.30017a57.266888 57.266888 0 0 1-57.26689 57.26689 57.266888 57.266888 0 0 1-57.26688-57.26689 57.266888 57.266888 0 0 1 57.26688-57.26689 57.266888 57.266888 0 0 1 57.26689 57.26689z";
if ($.action.mode == "view") {
TweenMax.to($.bubble, 0.7, {
xPercent: 0,
ease: Power3.easeInOut
});
TweenMax.to($.bubble.querySelector('path'), 0.45, {
morphSVG: goo_l,
ease: Power2.easeIn
});
TweenMax.to($.bubble.querySelector('path'), 0.55, {
morphSVG: ungoo,
delay:0.45,
ease: Elastic.easeOut.config( 0.4, 0.25)
});
} else {
TweenMax.to($.bubble, 0.7, {
xPercent: 70,
ease: Power3.easeInOut
});
TweenMax.to($.bubble.querySelector('path'), 0.45, {
morphSVG: goo_r,
ease: Power2.easeIn
});
TweenMax.to($.bubble.querySelector('path'), 0.55, {
morphSVG: ungoo,
delay:0.45,
ease: Elastic.easeOut.config( 0.4, 0.25)
});
};
}
}]);
</script>
/*=====================================
= SWITCH STYLES =
======================================*/
body {
background-color: #4085ee;
}
body > div {
position: relative;
width: 100%;
height: 100%;
}
#page {
position: relative;
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.switch input {
display: none;
visibility: hidden;
opacity: 0;
}
.switch .s_wrapper {
position: relative;
background-color: #1e59af;
width: 120px;
height: 60px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.switch .s_wrapper form {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
*zoom: 1;
overflow: visible;
}
.switch .s_wrapper form label {
width: 50%;
height: 100%;
float: left;
text-align: center;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.switch .s_wrapper form label md-icon {
z-index: 2;
cursor: pointer;
color: #4085ee;
}
.switch .s_wrapper .switch_bubble {
position: absolute;
height: 140%;
width: auto;
z-index: 0;
left: -10%;
top: -20%;
overflow: visible;
}
.switch .s_wrapper .switch_bubble path {
fill: #FFFFFF;
}
.switch .s_wrapper label {
z-index: 1;
}
footer {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
padding: 16px 0;
color: #FFFFFF;
}
footer a {
color: #1e59af;
}
