Ajax Loader
HTML 
    <div class="toolbar">
1
    <div class="toolbar">
2
        <div class="tabs">
3
            <ul>
4
                <li class="tabitem active"><a href="#box1">ALL<span></span></a></li>
5
                <li class="tabitem"><a href="#box2">FAVORITES<span></span></a></li>
6
            </ul>
7
        </div>
8
    </div>
9
    <div class="content">
10
        <div id="box1" class="box show">
11
            <div class="item">
12
                <div class="itemhead">
13
                    <img src="http://www.polymer-project.org/apps/polymer-tutorial/images/avatar-01.svg" width="70" height"70" />
14
                    <h2>Eric</h2>
15
                    <div class="heart">
16
                        <svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
17
                    </div>
18
                </div>
19
              <p>Have you heard about the Web Components revolution?</p><p>Click to tabs!</p>
20
            </div>
21
          <div class="item">
22
                <div class="itemhead">
23
                    <img src="http://www.polymer-project.org/apps/polymer-tutorial/images/avatar-05.svg" width="70" height"70" />
24
                    <h2>Norberrt</h2>
25
                    <div class="heart">
26
                        <svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
27
                    </div>
28
                </div>
29
            <p>Decentralize! No canvas, no polymer.</p><p><strong>Needs only CSS and pure javascript!</strong></p>
30
            </div>
31
        </div>
32
        <div id="box2" class="box">
33
            <div class="item">
34
                <div class="itemhead">
35
                    <img src="http://www.polymer-project.org/apps/polymer-tutorial/images/avatar-02.svg" width="70" height"70" />
36
                    <h2>Rob</h2>
37
                    <div class="heart">
38
                        <svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
39
                    </div>
40
                </div>
41
              <p>Loving this Polymer thing. This tab app from Polymer projects.</p><p><a href="http://www.polymer-project.org/samples/tutorial/finished/index.html" target="_blank">YOU CAN SEE IT ON THIS LINK</a></p>
42
            </div>
43
        </div>
44
    </div>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,300);
1
@import url(http://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,300);
2
body {margin:0;background:#E5E5E5;font-weight:300;color:#404040;font-family: "RobotoDraft", Helvetica, Arial, sans-serif;letter-spacing:.1px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
3
.toolbar {height:64px;background:#03A9F4}
4
.tabs {padding-top:14px}
5
.tabs ul {list-style:none;margin:0;width:100%;overflow:hidden;padding:0;margin-left:16px;}
6
.tabs ul li {float:left;width:100px}
7
.tabs a {position:relative;color:white;text-decoration:none;display:block;width:100px;height:50px;text-align:center;line-height:52px;font-weight:500;font-size:14px;color:rgba(255,255,255,0.6);overflow:hidden;}
8
.tabs .active a {color:white;}
9
.tabs .active a:after {height:2px;width:100%;display:block;content:" ";bottom:0px;left:0px;position:absolute;background:#FFFF8D;
10
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;transition:all 1s cubic-bezier(0.4, 0.0, 1, 1);}
11
.tabs a span {position:absolute;margin-left:-40px;margin-top:-24px;width:80px;background:rgba(255,255,141,1);height:100%;display:block;border-radius:50%;opacity:0;}
12
.tabs a span.clicked {-webkit-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;-moz-animation: expand 0.6s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;border-bottom:2px solid #FFFF8D;}
13
.content {box-shadow:inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);height:500px;padding-top:50px;position:relative;top:0px;overflow:hidden;}
14
.item {background:white;width:440px;padding-bottom:30px;margin:0 auto 2em;}
15
.itemhead {padding:30px;overflow:hidden;position:relative;}
16
.itemhead img {border-radius:100%;float:left}
17
.itemhead h2 {float:left;margin-left:20px;}
18
.itemhead .heart {cursor:pointer;position:absolute;right:4px;top:4px;padding:7px;border-radius:2px}
19
.item p:first-of-type {margin-top:0}
20
.item p {padding:0px 30px;font-size:19px;line-height:26px;margin:0;margin-top:1em;}
21
.item a {text-decoration:none;color:#00bcd4;font-weight:500;font-size:0.8em;}
22
 
23
.heart:hover {box-shadow:0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1)}
24
.heart #favorite {fill:#636363}
25
.heart.active #favorite {fill:#DA4336;}
26
 
27
.box {display:none;overflow:auto;position:relative;overflow-x:hidden;}
28
.box.show {display:block;}
29
 
30
@-webkit-keyframes expand {
31
    0% {
32
        background:rgba(255,255,141,1);
33
        opacity:1;
34
        border-radius:100%;
35
        transform: scale(0);
36
        -webkit-transform: scale(0);
37
        -moz-transform:scale(0);
38
    }
39
    50% {
40
        background:rgba(255,255,141,0.8);
41
        border-radius:50%;
42
    }
43
    100% {
44
        background:rgba(255,255,141,0);
45
        transform: scale(3);
46
        border-radius: 0;
47
        -webkit-transform: scale(3);
48
        -moz-transform:scale(3);
49
        opacity:1;
50
    }
51
}
52
@-moz-keyframes expand {
53
    0% {
54
        background:rgba(255,255,141,1);
55
        opacity:1;
56
        border-radius:100%;
57
        transform: scale(0);
58
        -moz-transform:scale(0);
59
    }
60
    50% {
61
        background:rgba(255,255,141,0.8);
62
        border-radius:50%;
63
    }
64
    100% {
65
        background:rgba(255,255,141,0);
66
        transform: scale(3);
67
        border-radius: 0;
68
        -moz-transform:scale(3);
69
        opacity:1;
70
    }
71
}
72
@-webkit-keyframes border-expand {
73
    0% {
74
        opacity:0;
75
        width:0;
76
    }
77
    100% {
78
        opacity:1;
79
        width:100%;
80
    }
81
}
82
@-moz-keyframes border-expand {
83
    0% {
84
        opacity:0;
85
        width:0;
86
    }
87
    100% {
88
        opacity:1;
89
        width:100%;
90
    }
91
}
 
JavaScript 
 
1
 
2
window.onload = function() {
3
    var heart = document.getElementsByClassName("heart");
4
    var classname = document.getElementsByClassName("tabitem");
5
    var boxitem = document.getElementsByClassName("box");
6
 
7
    var clickFunction = function(e) {
8
        e.preventDefault();
9
        var a = this.getElementsByTagName("a")[0];
10
        var span = this.getElementsByTagName("span")[0];
11
        var href = a.getAttribute("href").replace("#","");
12
        for(var i=0;i<boxitem.length;i++){
13
            boxitem[i].className =  boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
14
        }
15
        document.getElementById(href).className += " show";
16
        for(var i=0;i<classname.length;i++){
17
            classname[i].className =  classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
18
        }
19
        this.className += " active";
20
        span.className += 'active';
21
        var left = a.getBoundingClientRect().left;
22
        var top = a.getBoundingClientRect().top;
23
        var consx = (e.clientX - left);
24
        var consy = (e.clientY - top);
25
        span.style.top = consy+"px";
26
        span.style.left = consx+"px";
27
        span.className = 'clicked';
28
        span.addEventListener('webkitAnimationEnd', function(event){
29
            this.className = '';
30
        }, false);
31
    };
32
 
33
    for(var i=0;i<classname.length;i++){
34
        classname[i].addEventListener('click', clickFunction, false);
35
    }
36
    for(var i=0;i<heart.length;i++){
37
        heart[i].addEventListener('click', function(e) {
38
            var classString = this.className, nameIndex = classString.indexOf("active");
39
            if (nameIndex == -1) {
40
                classString += ' ' + "active";
41
            }
42
            else {
43
                classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+"active".length);
44
            }
45
            this.className = classString;
46
 
47
        }, false);
48
    }
49
}
 

Material Design App - Animated Tabs

CSSDeck G+