Progress Button Styles Creative effects for loading buttons

fill horizontal

fill vertical

shrink horizontal

shrink vertical

rotate-angle-bottom
perspective

rotate-angle-top
perspective

rotate-angle-left
perspective

rotate-angle-right
perspective

rotate-side-down
perspective

rotate-side-up
perspective

rotate-side-left
perspective

rotate-side-right
perspective

rotate-back
perspective

flip-open
perspective

slide-down
horizontal

move-up
horizontal

top-line
horizontal

lateral-lines
vertical

center-line
horizontal

Source Code

<div class="wrapper"> <section> <h2>fill horizontal</h2> <button class="progress-button" data-style="fill" data-horizontal=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>fill vertical</h2> <button class="progress-button" data-style="fill" data-vertical=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>shrink horizontal</h2> <button class="progress-button" data-style="shrink" data-horizontal=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>shrink vertical</h2> <button class="progress-button" data-style="shrink" data-vertical=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> </div> <div class="wrapper"> <section> <h2>rotate-angle-bottom <br>perspective</h2> <button class="progress-button" data-style="rotate-angle-bottom" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-angle-top <br>perspective</h2> <button class="progress-button" data-style="rotate-angle-top" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-angle-left <br>perspective</h2> <button class="progress-button" data-style="rotate-angle-left" data-perspective="" data-vertical=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-angle-right <br>perspective</h2> <button class="progress-button" data-style="rotate-angle-right" data-perspective="" data-vertical=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> </div> <div class="wrapper"> <section> <h2>rotate-side-down <br>perspective</h2> <button class="progress-button" data-style="rotate-side-down" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-side-up <br>perspective</h2> <button class="progress-button" data-style="rotate-side-up" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-side-left <br>perspective</h2> <button class="progress-button" data-style="rotate-side-left" data-perspective="" data-vertical=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>rotate-side-right <br>perspective</h2> <button class="progress-button" data-style="rotate-side-right" data-perspective="" data-vertical=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> </div> <div class="wrapper"> <section> <h2>rotate-back <br>perspective</h2> <button class="progress-button" data-style="rotate-back" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>flip-open <br>perspective</h2> <button class="progress-button" data-style="flip-open" data-perspective="" data-horizontal=""><span class="progress-wrap"><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></span></button> </section> <section> <h2>slide-down <br>horizontal</h2> <button class="progress-button" data-style="slide-down" data-horizontal=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>move-up <br>horizontal</h2> <button class="progress-button" data-style="move-up" data-horizontal=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> </div> <div class="wrapper"> <section> <h2>top-line <br>horizontal</h2> <button class="progress-button" data-style="top-line" data-horizontal=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>lateral-lines <br>vertical</h2> <button class="progress-button" data-style="lateral-lines" data-vertical=""><span class="content">Submit</span><span class="progress"><span class="progress-inner"></span></span></button> </section> <section> <h2>center-line <br/>horizontal</h2> <button class="progress-button" data-style="center-line" data-horizontal>Submit</button> </section> </div>
CSS 1
<style> article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{ display:block; } audio,canvas,video{ display:inline-block; } audio:not([controls]){ display:none; height:0; } [hidden]{ display:none; } html{ font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } body{ margin:0; } a:focus{ outline:thin dotted; } a:active,a:hover{ outline:0; } h1{ font-size:2em; margin:0.67em 0; } abbr[title]{ border-bottom:1px dotted; } b,strong{ font-weight:bold; } dfn{ font-style:italic; } hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0; } mark{ background:#ff0; color:#000; } code,kbd,pre,samp{ font-family:monospace,serif; font-size:1em; } pre{ white-space:pre-wrap; } q{ quotes:"\201C" "\201D" "\2018" "\2019"; } small{ font-size:80%; } sub,sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup{ top:-0.5em; } sub{ bottom:-0.25em; } img{ border:0; } svg:not(:root){ overflow:hidden; } figure{ margin:0; } fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; } legend{ border:0; padding:0; } button,input,select,textarea{ font-family:inherit; font-size:100%; margin:0; } button,input{ line-height:normal; } button,select{ text-transform:none; } button,html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer; } button[disabled],html input[disabled]{ cursor:default; } input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0; } input[type="search"]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; } button::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0; } textarea{ overflow:auto; vertical-align:top; } table{ border-collapse:collapse; border-spacing:0; } </style>
CSS 2
<style> *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @font-face { font-weight: normal; font-style: normal; font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); } /* General styles for all types of buttons */ .progress-button { position: relative; display: inline-block; padding: 0 60px; outline: none; border: none; background: #565771; color: #00FF00; text-transform: uppercase; letter-spacing: 1px; font-size: 1em; line-height: 4; } .progress-button[disabled], .progress-button[disabled].state-loading { cursor: default; } .progress-button .content { position: relative; display: block; } .progress-button .content::before, .progress-button .content::after { position: absolute; right: 20px; color: #0e7138; font-family: "icomoon"; opacity: 0; -webkit-transition: opacity 0.3s 0.3s; transition: opacity 0.3s 0.3s; } .progress-button .content::before { content: "\e600"; /* Checkmark for success */ } .progress-button .content::after { content: "\e601"; /* Cross for error */ } .progress-button.state-success .content::before, .progress-button.state-error .content::after { opacity: 1; } .notransition { -webkit-transition: none !important; transition: none !important; } .progress-button .progress { background: #8105cc; } .progress-button .progress-inner { position: absolute; left: 0; background: #0e7138; } .progress-button[data-horizontal] .progress-inner { top: 0; width: 0; height: 100%; -webkit-transition: width 0.3s, opacity 0.3s; transition: width 0.3s, opacity 0.3s; } .progress-button[data-vertical] .progress-inner { bottom: 0; width: 100%; height: 0; -webkit-transition: height 0.3s, opacity 0.3s; transition: height 0.3s, opacity 0.3s; } /* Necessary 3d styles for buttons with perspective */ .progress-button[data-perspective] { position: relative; display: inline-block; padding: 0; background: transparent; -webkit-perspective: 900px; perspective: 900px; } .progress-button[data-perspective] .content { padding: 0 60px; background: #8105cc; } .progress-button[data-perspective] .progress-wrap { display: block; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .progress-button[data-perspective] .content, .progress-button[data-perspective] .progress { outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */ } /* Individual styles */ /* Choose the effect(s) you want, delete the rest */ /* Fill horizontal */ /* ====================== */ .progress-button[data-style="fill"][data-horizontal] { overflow: hidden; } .progress-button[data-style="fill"][data-horizontal] .content { z-index: 10; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .progress-button[data-style="fill"][data-horizontal] .content::before, .progress-button[data-style="fill"][data-horizontal] .content::after { top: 100%; right: auto; left: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .progress-button[data-style="fill"][data-horizontal].state-success .content, .progress-button[data-style="fill"][data-horizontal].state-error .content { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* Fill vertical */ /* ====================== */ .progress-button[data-style="fill"][data-vertical] { overflow: hidden; } .progress-button[data-style="fill"][data-vertical] .content { z-index: 10; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .progress-button[data-style="fill"][data-vertical] .content::before, .progress-button[data-style="fill"][data-vertical] .content::after { top: 100%; right: auto; left: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .progress-button[data-style="fill"][data-vertical].state-success .content, .progress-button[data-style="fill"][data-vertical].state-error .content { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* Shrink horizontal */ /* ====================== */ .progress-button[data-style="shrink"] { /* common for horizontal and vertical */ overflow: hidden; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } .progress-button[data-style="shrink"][data-horizontal] .content { -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .progress-button[data-style="shrink"][data-horizontal] .content::before, .progress-button[data-style="shrink"][data-horizontal] .content::after { top: 100%; right: auto; left: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .progress-button[data-style="shrink"][data-horizontal].state-loading { -webkit-transform: scaleY(0.3); transform: scaleY(0.3); } .progress-button[data-style="shrink"][data-horizontal].state-loading .content { opacity: 0; } .progress-button[data-style="shrink"][data-horizontal].state-success .content, .progress-button[data-style="shrink"][data-horizontal].state-error .content { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* Shrink vertical */ /* ====================== */ .progress-button[data-style="shrink"][data-vertical] .content { -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .progress-button[data-style="shrink"][data-vertical] .content::before, .progress-button[data-style="shrink"][data-vertical] .content::after { top: 100%; right: auto; left: 50%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .progress-button[data-style="shrink"][data-vertical].state-loading { -webkit-transform: scaleX(0.1); transform: scaleX(0.1); } .progress-button[data-style="shrink"][data-vertical].state-loading .content { opacity: 0; } .progress-button[data-style="shrink"][data-vertical].state-success .content, .progress-button[data-style="shrink"][data-vertical].state-error .content { -webkit-transform: translateY(-100%); transform: translateY(-100%); } /* Rotate bottom 3d */ /* ====================== */ .progress-button[data-style="rotate-angle-bottom"] .progress { position: absolute; top: 100%; left: 0; width: 100%; height: 20px; box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */ -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap { -webkit-transform: rotateX(45deg); transform: rotateX(45deg); } /* Rotate top 3d */ /* ====================== */ .progress-button[data-style="rotate-angle-top"] .progress { position: absolute; bottom: 100%; left: 0; width: 100%; height: 20px; box-shadow: 0 1px 0 #0de6e4; /* fix the blurriness that causes a gap */ -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .progress-button[data-style="rotate-angle-top"].state-loading .progress-wrap { -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); } /* Rotate left 3d */ /* ====================== */ .progress-button[data-style="rotate-angle-left"] .progress { position: absolute; top: 0; right: 100%; width: 20px; height: 100%; box-shadow: 1px 0 0 #148544; /* fix the blurriness that causes a gap */ -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .progress-button[data-style="rotate-angle-left"].state-loading .progress-wrap { -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } /* Rotate right 3d */ /* ====================== */ .progress-button[data-style="rotate-angle-right"] .progress { position: absolute; top: 0; left: 100%; width: 20px; height: 100%; box-shadow: -1px 0 0 #148544; /* fix the blurriness that causes a gap */ -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .progress-button[data-style="rotate-angle-right"].state-loading .progress-wrap { -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } /* Rotate side down 3d */ /* ====================== */ .progress-button[data-style="rotate-side-down"] .progress { position: absolute; top: 100%; left: 0; width: 100%; height: 20px; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="rotate-side-down"].state-loading .progress-wrap { -webkit-transform: rotateX(90deg) translateZ(10px); transform: rotateX(90deg) translateZ(10px); } /* Rotate side up 3d */ /* ====================== */ .progress-button[data-style="rotate-side-up"] .progress { position: absolute; bottom: 100%; left: 0; width: 100%; height: 20px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="rotate-side-up"].state-loading .progress-wrap { -webkit-transform: rotateX(-90deg) translateZ(10px); transform: rotateX(-90deg) translateZ(10px); } /* Rotate side left 3d */ /* ====================== */ .progress-button[data-style="rotate-side-left"] .progress-wrap { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .progress-button[data-style="rotate-side-left"] .progress { position: absolute; top: 0; left: 0; width: 20px; height: 100%; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .progress-button[data-style="rotate-side-left"].state-loading .progress-wrap { -webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px); transform: translateX(50%) rotateY(90deg) translateZ(10px); } /* Rotate side right 3d */ /* ====================== */ .progress-button[data-style="rotate-side-right"] .progress-wrap { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } .progress-button[data-style="rotate-side-right"] .progress { position: absolute; top: 0; left: 100%; width: 20px; height: 100%; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .progress-button[data-style="rotate-side-right"].state-loading .progress-wrap { -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px); transform: translateX(-50%) rotateY(-90deg) translateZ(10px); } /* Rotate back 3d */ /* ====================== */ .progress-button[data-style="rotate-back"] .progress-wrap { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .progress-button[data-style="rotate-back"] .content { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="rotate-back"] .progress { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="rotate-back"].state-loading .progress-wrap { -webkit-transform: rotateX(180deg) scaleX(0.6) scaleY(0.3); transform: rotateX(180deg) scaleX(0.6) scaleY(0.3); } /* flip open 3d */ /* ====================== */ .progress-button[data-style="flip-open"] .content { z-index: 10; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .progress-button[data-style="flip-open"] .progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .progress-button[data-style="flip-open"].state-loading .content { -webkit-transform: rotateX(45deg); transform: rotateX(45deg); } /* slide down */ /* ====================== */ .progress-button[data-style="slide-down"] { padding: 0; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="slide-down"] .content { z-index: 10; padding: 0 60px; background: #8105cc; } .progress-button[data-style="slide-down"] .progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } .progress-button[data-style="slide-down"].state-loading .progress { -webkit-transform: translateY(10px); transform: translateY(10px); } /* move-up */ /* ====================== */ .progress-button[data-style="move-up"] { padding: 0; overflow: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .progress-button[data-style="move-up"] .content { z-index: 10; padding: 0 60px; background: #8105cc; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } .progress-button[data-style="move-up"] .progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .progress-button[data-style="move-up"].state-loading .content { -webkit-transform: translateY(-10px); transform: translateY(-10px); } /* top-line */ /* ====================== */ .progress-button[data-style="top-line"] .progress-inner { height: 3px; } .progress-button[data-style="top-line"] .content::before, .progress-button[data-style="top-line"] .content::after { right: auto; left: 100%; margin-left: 25px; } /* lateral-lines */ /* ====================== */ .progress-button[data-style="lateral-lines"] .progress-inner { width: 100%; border-right: 3px solid #0e7138; border-left: 3px solid #0e7138; background: transparent; } .progress-button[data-style="lateral-lines"] .content::before, .progress-button[data-style="lateral-lines"] .content::after { right: auto; left: 100%; margin-left: 25px; } </style>
CSS 3
<style> @font-face { font-family: 'code4useicons'; src:url('../fonts/code4useicons/code4useicons.eot'); src:url('../fonts/code4useicons/code4useicons.eot?#iefix') format('embedded-opentype'), url('../fonts/code4useicons/code4useicons.woff') format('woff'), url('../fonts/code4useicons/code4useicons.ttf') format('truetype'), url('../fonts/code4useicons/code4useicons.svg#code4useicons') format('svg'); font-weight: normal; font-style: normal; } body { background: #744AFF; color: #fff; font-family: 'Lato', Arial, sans-serif; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } a { color: #148544; text-decoration: none; outline: none; } a:hover, a:focus { color: #8105cc; } .container > header { margin: 0 auto 2em; padding: 2em; text-align: center; background: rgba(0,0,0,0.01); } .container > header h1 { font-size: 3.5em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; color: #0006ef; padding: 0.3em 0 0.6em 0.1em; } .note { color: #85cd62; } /* To Navigation Style */ .code4use-top { text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; font-weight: 700; } .code4use-top a { text-decoration: none; padding: 0 1em; letter-spacing: 0.1em; display: inline-block; } .code4use-top span.right { float: right; } .code4use-top span.right a { float: left; display: block; } .code4use-icon:before { font-family: 'code4useicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .code4use-icon-drop:before { content: "\e001"; } .code4use-icon-prev:before { content: "\e004"; } .wrapper { text-align: center; vertical-align: top; } section { position: relative; text-align: center; padding: 1em 1em 3em; } .wrapper section { display: inline-block; width: 280px; } section h2 { text-transform: uppercase; letter-spacing: 1px; color: #2795e9; font-weight: 700; padding: 1em; font-size: 0.8em; -webkit-backface-visibility: hidden; } .related { font-size: 2em; font-weight: 300; } @media screen and (max-width: 25em) { .container > header { font-size: 70%; } .related { font-size: 120%; } .code4use-icon span { display: none; } } </style>
Javascript 1
<script> [].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) { new ProgressButton( bttn, { callback : function( instance ) { var progress = 0, interval = setInterval( function() { progress = Math.min( progress + Math.random() * 0.1, 1 ); instance._setProgress( progress ); if( progress === 1 ) { instance._stop(1); clearInterval( interval ); } }, 200 ); } } ); } ); </script> <script> ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else { // browser global window.classie = classie; } })( window ); </script>
Javascript 2
<script> window.Modernizr = function(a, b, c) { function z(a) { j.cssText = a } function A(a, b) { return z(m.join(a + ";") + (b || "")) } function B(a, b) { return typeof a === b } function C(a, b) { return !!~("" + a).indexOf(b) } function D(a, b) { for (var d in a) { var e = a[d]; if (!C(e, "-") && j[e] !== c) return b == "pfx" ? e : !0 } return !1 } function E(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : B(f, "function") ? f.bind(d || b) : f } return !1 } function F(a, b, c) { var d = a.charAt(0).toUpperCase() + a.slice(1), e = (a + " " + o.join(d + " ") + d).split(" "); return B(b, "string") || B(b, "undefined") ? D(e, b) : (e = (a + " " + p.join(d + " ") + d).split(" "), E(e, b, c)) } var d = "2.7.1", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style, k, l = {}.toString, m = " -webkit- -moz- -o- -ms- ".split(" "), n = "Webkit Moz O ms", o = n.split(" "), p = n.toLowerCase().split(" "), q = {}, r = {}, s = {}, t = [], u = t.slice, v, w = function(a, c, d, e) { var f, i, j, k, l = b.createElement("div"), m = b.body, n = m || b.createElement("body"); if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j); return f = ["", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m || (n.style.background = "", n.style.overflow = "hidden", k = g.style.overflow, g.style.overflow = "hidden", g.appendChild(n)), i = c(l, a), m ? l.parentNode.removeChild(l) : (n.parentNode.removeChild(n), g.style.overflow = k), !!i }, x = {}.hasOwnProperty, y; !B(x, "undefined") && !B(x.call, "undefined") ? y = function(a, b) { return x.call(a, b) } : y = function(a, b) { return b in a && B(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function(b) { var c = this; if (typeof c != "function") throw new TypeError; var d = u.call(arguments, 1), e = function() { if (this instanceof e) { var a = function() {}; a.prototype = c.prototype; var f = new a, g = c.apply(f, d.concat(u.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(u.call(arguments))) }; return e }), q.csstransforms3d = function() { var a = !!F("perspective"); return a && "webkitPerspective" in g.style && w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", function(b, c) { a = b.offsetLeft === 9 && b.offsetHeight === 3 }), a }, q.csstransitions = function() { return F("transition") }; for (var G in q) y(q, G) && (v = G.toLowerCase(), e[v] = q[G](), t.push((e[v] ? "" : "no-") + v)); return e.addTest = function(a, b) { if (typeof a == "object") for (var d in a) y(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b } return e }, z(""), i = k = null, function(a, b) { function l(a, b) { var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement; return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild) } function m() { var a = s.elements; return typeof a == "string" ? a.split(" ") : a } function n(a) { var b = j[a[h]]; return b || (b = {}, i++, a[h] = i, j[i] = b), b } function o(a, c, d) { c || (c = b); if (k) return c.createElement(a); d || (d = n(c)); var g; return d.cache[a] ? g = d.cache[a].cloneNode() : f.test(a) ? g = (d.cache[a] = d.createElem(a)).cloneNode() : g = d.createElem(a), g.canHaveChildren && !e.test(a) && !g.tagUrn ? d.frag.appendChild(g) : g } function p(a, c) { a || (a = b); if (k) return a.createDocumentFragment(); c = c || n(a); var d = c.frag.cloneNode(), e = 0, f = m(), g = f.length; for (; e < g; e++) d.createElement(f[e]); return d } function q(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function(c) { return s.shivMethods ? o(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/[\w\-]+/g, function(a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(s, b.frag) } function r(a) { a || (a = b); var c = n(a); return s.shivCSS && !g && !c.hasCSS && (c.hasCSS = !!l(a, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")), k || q(a, c), a } var c = "3.7.0", d = a.html5 || {}, e = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i, f = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i, g, h = "_html5shiv", i = 0, j = {}, k; (function() { try { var a = b.createElement("a"); a.innerHTML = "<xyz></xyz>", g = "hidden" in a, k = a.childNodes.length == 1 || function() { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" }() } catch (c) { g = !0, k = !0 } })(); var s = { elements: d.elements || "abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video", version: c, shivCSS: d.shivCSS !== !1, supportsUnknownElements: k, shivMethods: d.shivMethods !== !1, type: "default", shivDocument: r, createElement: o, createDocumentFragment: p }; a.html5 = s, r(b) }(this, b), e._version = d, e._prefixes = m, e._domPrefixes = p, e._cssomPrefixes = o, e.testProp = function(a) { return D([a]) }, e.testAllProps = F, e.testStyles = w, e.prefixed = function(a, b, c) { return b ? F(a, b, c) : F(a, "pfx") }, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + t.join(" ") : ""), e }(this, this.document), function(a, b, c) { function d(a) { return "[object Function]" == o.call(a) } function e(a) { return "string" == typeof a } function f() {} function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a } function h() { var a = p.shift(); q = 1, a ? a.t ? m(function() { ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1) }, 0) : (a(), h()) : q = 0 } function i(a, c, d, e, f, i, j) { function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function() { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } } var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = { t: d, s: c, e: f, a: i, x: j }; 1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function() { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l)) } function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this } function k() { var a = B; return a.loader = { load: j, i: 0 }, a } var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [], q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode, t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l, u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function(a) { return "[object Array]" == o.call(a) }, x = [], y = {}, z = { timeout: function(a, b) { return b.length && (a.timeout = b[0]), a } }, A, B; B = function(a) { function b(a) { var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = { url: c, origUrl: c, prefixes: a }, e, f, g; for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g)); for (f = 0; f < b; f++) c = x[f](c); return c } function g(a, e, f, g, h) { var i = b(a), j = i.autoCallback; i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function() { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 }))) } function h(a, b) { function c(a, c) { if (a) { if (e(a)) c || (j = function() { var a = [].slice.call(arguments); k.apply(this, a), l() }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function() { var b = 0, c; for (c in a) a.hasOwnProperty(c) && b++; return b }(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function() { var a = [].slice.call(arguments); k.apply(this, a), l() } : j[n] = function(a) { return function() { var b = [].slice.call(arguments); a && a.apply(this, b), l() } }(k[n])), g(a[n], j, b, n, h)) } else !c && l() } var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n; c(h ? a.yep : a.nope, !!i), i && c(i) } var i, j, l = this.yepnope.loader; if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l) }, B.addPrefix = function(a, b) { z[a] = b }, B.addFilter = function(a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function() { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function(a, c, d, e, i, j) { var k = b.createElement("script"), l, o, e = e || B.errorTimeout; k.src = a; for (o in d) k.setAttribute(o, d[o]); c = j ? h : c || f, k.onreadystatechange = k.onload = function() { !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function() { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n) }, a.yepnope.injectCss = function(a, c, d, e, g, i) { var e = b.createElement("link"), j, c = i ? h : c || f; e.href = a, e.rel = "stylesheet", e.type = "text/css"; for (j in d) e.setAttribute(j, d[j]); g || (n.parentNode.insertBefore(e, n), m(c, 0)) } }(this, document), Modernizr.load = function() { yepnope.apply(window, [].slice.call(arguments, 0)) }; </script>
Javascript 3
<script> ( function( window ) { 'use strict'; Modernizr.addTest('csstransformspreserve3d', function () { var prop = Modernizr.prefixed('transformStyle'); var val = 'preserve-3d'; var computedStyle; if(!prop) return false; prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; }); return (computedStyle === val); }); function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } // support var support = { transitions : Modernizr.csstransitions, transforms3d : Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d }, // transition end event name transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; function ProgressButton( el, options ) { this.button = el; this.options = extend( {}, this.options ); extend( this.options, options ); this._init(); } ProgressButton.prototype.options = { // time in ms that the status (success or error will be displayed) // during this time the button will be disabled statusTime : 1500 }; ProgressButton.prototype._init = function() { this._validate(); // create structure this._create(); // init events this._initEvents(); }; ProgressButton.prototype._validate = function() { // we will consider the fill/horizontal as default if( this.button.getAttribute( 'data-style' ) === null ) { this.button.setAttribute( 'data-style', 'fill' ); } if( this.button.getAttribute( 'data-vertical' ) === null && this.button.getAttribute( 'data-horizontal' ) === null ) { this.button.setAttribute( 'data-horizontal', '' ); } if( !support.transforms3d && this.button.getAttribute( 'data-perspective' ) !== null ) { this.button.removeAttribute( 'data-perspective' ); this.button.setAttribute( 'data-style', 'fill' ); this.button.removeAttribute( 'data-vertical' ); this.button.setAttribute( 'data-horizontal', '' ); } }; ProgressButton.prototype._create = function() { var textEl = document.createElement( 'span' ); textEl.className = 'content'; textEl.innerHTML = this.button.innerHTML; var progressEl = document.createElement( 'span' ); progressEl.className = 'progress'; var progressInnerEl = document.createElement( 'span' ); progressInnerEl.className = 'progress-inner'; progressEl.appendChild( progressInnerEl ); // clear content this.button.innerHTML = ''; if( this.button.getAttribute( 'data-perspective' ) !== null ) { var progressWrapEl = document.createElement( 'span' ); progressWrapEl.className = 'progress-wrap'; progressWrapEl.appendChild( textEl ); progressWrapEl.appendChild( progressEl ); this.button.appendChild( progressWrapEl ); } else { this.button.appendChild( textEl ); this.button.appendChild( progressEl ); } // the element that serves as the progress bar this.progress = progressInnerEl; // property to change on the progress element if( this.button.getAttribute( 'data-horizontal' ) !== null ) { this.progressProp = 'width'; } else if( this.button.getAttribute( 'data-vertical' ) !== null ) { this.progressProp = 'height'; } this._enable(); }; ProgressButton.prototype._setProgress = function( val ) { this.progress.style[ this.progressProp ] = 100 * val + '%'; }; ProgressButton.prototype._initEvents = function() { var self = this; this.button.addEventListener( 'click', function() { // disable the button self.button.setAttribute( 'disabled', '' ); // add class state-loading to the button (applies a specific transform to the button depending which data-style is defined - defined in the stylesheets) classie.remove( self.progress, 'notransition' ); classie.add( this, 'state-loading' ); setTimeout( function() { if( typeof self.options.callback === 'function' ) { self.options.callback( self ); } else { self._setProgress( 1 ); var onEndTransFn = function( ev ) { if( support.transitions && ev.propertyName !== self.progressProp ) return; this.removeEventListener( transEndEventName, onEndTransFn ); self._stop(); }; if( support.transitions ) { self.progress.addEventListener( transEndEventName, onEndTransFn ); } else { onEndTransFn.call(); } } }, self.button.getAttribute( 'data-style' ) === 'fill' || self.button.getAttribute( 'data-style' ) === 'top-line' || self.button.getAttribute( 'data-style' ) === 'lateral-lines' ? 0 : 200 ); // TODO: change timeout to transitionend event callback } ); }; ProgressButton.prototype._stop = function( status ) { var self = this; setTimeout( function() { // fade out progress bar self.progress.style.opacity = 0; var onEndTransFn = function( ev ) { if( support.transitions && ev.propertyName !== 'opacity' ) return; this.removeEventListener( transEndEventName, onEndTransFn ); classie.add( self.progress, 'notransition' ); self.progress.style[ self.progressProp ] = '0%'; self.progress.style.opacity = 1; }; if( support.transitions ) { self.progress.addEventListener( transEndEventName, onEndTransFn ); } else { onEndTransFn.call(); } // add class state-success to the button if( typeof status === 'number' ) { var statusClass = status >= 0 ? 'state-success' : 'state-error'; classie.add( self.button, statusClass ); // after options.statusTime remove status setTimeout( function() { classie.remove( self.button, statusClass ); self._enable(); }, self.options.statusTime ); } else { self._enable(); } // remove class state-loading from the button classie.remove( self.button, 'state-loading' ); }, 100 ); }; // enable button ProgressButton.prototype._enable = function() { this.button.removeAttribute( 'disabled' ); } // add to global namespace window.ProgressButton = ProgressButton; })( window ); </script>

fill horizontal

fill vertical

shrink horizontal

shrink vertical

rotate-angle-bottom perspective

rotate-angle-top perspective

rotate-angle-left perspective

rotate-angle-right perspective

rotate-side-down perspective

rotate-side-up perspective

rotate-side-left perspective

rotate-side-right perspective

rotate-back perspective

flip-open perspective

slide-down horizontal

move-up horizontal

top-line horizontal

lateral-lines vertical

center-line horizontal