├── js ├── js.js ├── materialPreloader.min.js ├── materialPreloader.js └── materialPreloader-vanilla.js ├── .bower.json ├── index.html ├── README.md └── css ├── style.css ├── materialPreloader.min.css └── materialPreloader.css /js/js.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready(function($) { 2 | preloader = new $.materialPreloader({ 3 | position: 'top', 4 | height: '5px', 5 | col_1: '#159756', 6 | col_2: '#da4733', 7 | col_3: '#3b78e7', 8 | col_4: '#fdba2c', 9 | fadeIn: 200, 10 | fadeOut: 200 11 | }); 12 | preloader.on(); 13 | $('.on').on('click', function(event) { 14 | event.preventDefault(); 15 | preloader.on(); 16 | }); 17 | $('.off').on('click', function(event) { 18 | event.preventDefault(); 19 | preloader.off(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /.bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-preloader", 3 | "version": "0.0.0", 4 | "authors": [ 5 | "Aaron Lumsden " 6 | ], 7 | "description": "A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox)", 8 | "homepage": "https://github.com/aarondo/Material-Preloader", 9 | "_release": "896403cf2b", 10 | "_resolution": { 11 | "type": "branch", 12 | "branch": "master", 13 | "commit": "896403cf2bb33e55504b51ea5114fa3a4b40a697" 14 | }, 15 | "_source": "git://github.com/aarondo/Material-Preloader.git", 16 | "_target": "*", 17 | "_originalSource": "material-preloader", 18 | "_direct": true 19 | } 20 | -------------------------------------------------------------------------------- /js/materialPreloader.min.js: -------------------------------------------------------------------------------- 1 | (function(e){var t={position:"bottom",height:"5px",col_1:"#159756",col_2:"#da4733",col_3:"#3b78e7",col_4:"#fdba2c",fadeIn:200,fadeOut:200};e.materialPreloader=function(n){var r=e.extend({},t,n);$template="";e("body").prepend($template);this.on=function(){e("#materialPreloader").fadeIn(r.fadeIn)};this.off=function(){e("#materialPreloader").fadeOut(r.fadeOut)}}})(jQuery) 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Material Preloader 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 24 | 25 |

26 | 27 |

28 |

Material Design Preloader

29 | 30 |

A jQuery plugin that recreates the Material Design preloader
(as seen on inbox).

31 | 32 |

Download
Documentation

37 | 38 | 39 | 40 |

Created by @aaronlumsden

41 | 42 |

43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /js/materialPreloader.js: -------------------------------------------------------------------------------- 1 | ; 2 | (function($) { 3 | var defaults = { 4 | position: 'bottom', 5 | height: '5px', 6 | col_1: '#159756', 7 | col_2: '#da4733', 8 | col_3: '#3b78e7', 9 | col_4: '#fdba2c', 10 | fadeIn: 200, 11 | fadeOut: 200 12 | } 13 | $.materialPreloader = function(options) { 14 | var settings = $.extend({}, defaults, options); 15 | $template = 16 | ""; 36 | $('body').prepend($template); 37 | this.on = function() { 38 | $('#materialPreloader').fadeIn(settings.fadeIn); 39 | } 40 | this.off = function() { 41 | $('#materialPreloader').fadeOut(settings.fadeOut); 42 | } 43 | } 44 | }(jQuery)); 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Material Design Preloader!s 2 | ============= 3 | 4 | A jQuery plugin that recreates the Material Design preloader (as seen on inbox). 5 | 6 | 7 | ![materialPreloader.js](http://i60.tinypic.com/mj60lw.jpg) 8 | 9 | I was fascinated when I first saw the preloader for Google's inbox website so I thought I'd recreate it and turn it into a plugin so that others can use it in their app or website. 10 | 11 | ### How to use 12 | 13 | Make sure you have jQuery included and include 'materialPreloader.js' after jQuery. 14 | 15 | ```js 16 | 17 | 18 | 19 | ``` 20 | 21 | You also need to include 'materialPreloader.css'. 22 | 23 | ```css 24 | 25 | ``` 26 | 27 | You can then instantiate the plugin along with its options (if required). 28 | 29 | ```js 30 | 44 | ``` 45 | 46 | You can then call the following functions to turn the preloader on & off 47 | 48 | ```js 49 | preloader.on(); 50 | preloader.off(); 51 | ``` 52 | 53 | ### materialPreloader Options 54 | 55 | | Option | Required | Description | Options | Default | 56 | | ------------- |--------------------|----------------------------------|-------------|-------------| 57 | | position | No | Position to place the preloader | top/bottom | bottom | 58 | | height | No | The height of the preloader bar | any length | 5px | 59 | | col_1 | No | Color 1 option | any color | #159756 | 60 | | col_2 | No | Color 2 option | any color | #da4733 | 61 | | col_3 | No | Color 3 option | any color | #3b78e7 | 62 | | col_4 | No | Color 4 option | any color | #fdba2c | 63 | | fadeIn | No | Speed in milliseconds | any speed | 200 | 64 | | fadeOut | No | Speed in milliseconds | any speed | 200 | 65 | 66 | 67 | 68 | 69 | ## Browser Support 70 | 71 | - Chrome 72 | - Safari 73 | - Firefox 74 | - Not tested in IE 75 | -------------------------------------------------------------------------------- /js/materialPreloader-vanilla.js: -------------------------------------------------------------------------------- 1 | ;(function(window) { 2 | 3 | var materialPreloader = { 4 | 5 | defaultsOptions: { 6 | position: 'bottom', 7 | height: '5px', 8 | col_1: '#159756', 9 | col_2: '#da4733', 10 | col_3: '#3b78e7', 11 | col_4: '#fdba2c', 12 | fadeIn: 200, 13 | fadeOut: 200 14 | }, 15 | 16 | init: function(userOptions) { 17 | 18 | var tempDiv = document.createElement('div'), 19 | settings = materialPreloader.extend(materialPreloader.defaultsOptions, userOptions), 20 | template; 21 | 22 | materialPreloader.applyFadeConfig(settings); 23 | 24 | template = "

"; 44 | 45 | tempDiv.innerHTML = template; 46 | document.body.insertBefore(tempDiv, document.body.firstChild); 47 | 48 | return materialPreloader.public; 49 | 50 | }, 51 | 52 | extend: function ( defaults, options ) { 53 | var a = Object.create(defaults); 54 | Object.keys(options).map(function(prop) { 55 | prop in a && (a[prop] = options[prop]); 56 | }); 57 | return a; 58 | }, 59 | 60 | applyFadeConfig: function(settings) { 61 | var tempStyle = document.createElement('style'), 62 | fadeSettings = ''; 63 | 64 | if(settings.fadeIn !== 200 && materialPreloader.isInteger(settings.fadeIn)) { 65 | fadeSettings += '.load-bar.visible { -webkit-transition-duration: ' + (settings.fadeIn/1000) + 's; transition-duration: ' + (settings.fadeIn/1000) + 's; }'; 66 | } 67 | 68 | if(settings.fadeOut !== 200 && materialPreloader.isInteger(settings.fadeOut)) { 69 | fadeSettings += '.load-bar.invisible { -webkit-transition-duration: ' + (settings.fadeOut/1000) + 's; transition-duration: ' + (settings.fadeOut/1000) + 's; }'; 70 | } 71 | 72 | if(fadeSettings !== '') { 73 | tempStyle.innerHTML = fadeSettings 74 | document.body.insertBefore(tempStyle, document.body.firstChild); 75 | } 76 | 77 | }, 78 | 79 | isInteger: function(n) { 80 | return Number(n) === n && n%1 === 0; 81 | }, 82 | 83 | public: { 84 | on: function() { 85 | var materialDiv = document.getElementById('materialPreloader'); 86 | 87 | materialDiv.classList.remove('invisible'); 88 | materialDiv.classList.add('visible'); 89 | }, 90 | 91 | off: function() { 92 | var materialDiv = document.getElementById('materialPreloader'); 93 | 94 | materialDiv.classList.remove('visible'); 95 | materialDiv.classList.add('invisible'); 96 | } 97 | } 98 | 99 | }; 100 | 101 | window.materialPreloader = materialPreloader.init; 102 | 103 | })(window); -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* CSS Document */ 4 | /* 5 | Copyright (c) 2010, Yahoo! Inc. All rights reserved. 6 | Code licensed under the BSD License: 7 | http://developer.yahoo.com/yui/license.html 8 | version: 3.3.0 9 | build: 3167 10 | */ 11 | html { 12 | color:#000; 13 | background:#f5f5f5; 14 | font-family:'Roboto',sans-serif; 15 | color:#333 16 | } 17 | 18 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { 19 | margin:0; 20 | padding:0 21 | } 22 | 23 | table { 24 | border-collapse:collapse; 25 | border-spacing:0 26 | } 27 | 28 | fieldset,img { 29 | border:0 30 | } 31 | 32 | address,caption,cite,code,dfn,em,strong,th,var { 33 | font-style:normal; 34 | font-weight:400 35 | } 36 | 37 | li { 38 | list-style:none 39 | } 40 | 41 | caption,th { 42 | text-align:left 43 | } 44 | 45 | h1,h2,h3,h4,h5,h6 { 46 | font-size:100%; 47 | font-weight:400 48 | } 49 | 50 | q:before,q:after { 51 | content:'' 52 | } 53 | 54 | abbr,acronym { 55 | border:0; 56 | font-variant:normal 57 | } 58 | 59 | sup { 60 | vertical-align:text-top 61 | } 62 | 63 | sub { 64 | vertical-align:text-bottom 65 | } 66 | 67 | input,textarea,select { 68 | font-family:inherit; 69 | font-size:inherit; 70 | font-weight:inherit 71 | } 72 | 73 | input,textarea,select { 74 | *font-size:100% 75 | } 76 | 77 | legend { 78 | color:#000 79 | } 80 | 81 | * { 82 | box-sizing:border-box; 83 | moz-box-sizing:border-box 84 | } 85 | 86 | .clear { 87 | display:block; 88 | clear:both 89 | } 90 | 91 | #header { 92 | width:100%; 93 | height:64px; 94 | box-shadow:0 2px 2px rgba(0,0,0,.2); 95 | background:#fff 96 | } 97 | 98 | #box { 99 | width:500px; 100 | height:374px; 101 | position:absolute; 102 | top:50%; 103 | left:50%; 104 | margin-left:-250px; 105 | margin-top:-180px 106 | } 107 | 108 | #header ul li { 109 | float:left 110 | } 111 | 112 | #header ul { 113 | float:right; 114 | margin-top:20px 115 | } 116 | 117 | #header ul li a { 118 | font-size:12px; 119 | color:#333; 120 | padding:20px; 121 | text-decoration:none 122 | } 123 | 124 | #header ul li a:hover { 125 | color:#3b78e7 126 | } 127 | 128 | #buttons { 129 | width:350px; 130 | margin:0 auto; 131 | margin-bottom:120px; 132 | margin-top:40px 133 | } 134 | 135 | #buttons li { 136 | float:left; 137 | margin-left:10px; 138 | margin-right:10px 139 | } 140 | 141 | #buttons li a { 142 | width:150px; 143 | display:block; 144 | height:40px; 145 | line-height:2.333; 146 | border:2px solid #3b78e7; 147 | font-weight:700; 148 | color:#3b78e7; 149 | border-radius:3px; 150 | text-align:center; 151 | text-decoration:none 152 | } 153 | 154 | #buttons li a:hover { 155 | border:2px solid #da4733; 156 | color:#da4733 157 | } 158 | 159 | img { 160 | max-width:100px; 161 | display:block; 162 | margin:0 auto; 163 | margin-bottom:20px 164 | } 165 | 166 | h1 { 167 | font-size:36px; 168 | font-weight:300; 169 | text-align:center; 170 | margin-bottom:20px 171 | } 172 | 173 | h2 { 174 | font-size:25px; 175 | font-weight:300; 176 | text-align:center; 177 | margin-bottom:20px 178 | } 179 | 180 | p { 181 | text-align:center; 182 | margin-bottom:20px; 183 | line-height:1.5 184 | } 185 | 186 | p a { 187 | color:#3b78e7; 188 | text-decoration:none 189 | } 190 | 191 | p a:hover { 192 | color:#da4733 193 | } 194 | 195 | @media only screen and (max-width : 400px) { 196 | #box { 197 | position:static; 198 | margin-left:0; 199 | margin-top:20px; 200 | width:100%; 201 | padding:20px 202 | } 203 | 204 | h1 { 205 | font-size:18px 206 | } 207 | 208 | p { 209 | font-size:12px 210 | } 211 | 212 | #buttons li { 213 | float:none; 214 | margin-bottom:20px 215 | } 216 | 217 | #buttons { 218 | width:100%; 219 | margin-bottom:0 220 | } 221 | 222 | #buttons li a { 223 | width:100% 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /css/materialPreloader.min.css: -------------------------------------------------------------------------------- 1 | .load-bar{position:fixed;bottom:0;height:5px;width:100%}.load-bar-container{float:left;width:50%;height:100%;overflow:hidden}.load-bar .load-bar-container:last-child{float:right;-moz-transform-origin:top right;-ms-transform-origin:top right;-webkit-transform-origin:top right}.load-bar-base{float:left;width:100%;height:100%;overflow:hidden;position:relative;background:#159756}.color{width:100%;height:100%;float:left;position:absolute}.base1 .red{background:#da4733;-webkit-animation:move_left_red 4s infinite linear;-moz-animation:move_left_red 4s infinite linear;-ms-animation:move_left_red 4s infinite linear;animation:move_left_red 4s infinite linear}.base1 .blue{background:#3b78e7;-webkit-animation:move_left_blue 4s infinite linear;-moz-animation:move_left_blue 4s infinite linear;-ms-animation:move_left_blue 4s infinite linear;animation:move_left_blue 4s infinite linear}.base1 .yellow{background:#fdba2c;-webkit-animation:move_left_yellow 4s infinite linear;-moz-animation:move_left_yellow 4s infinite linear;-ms-animation:move_left_yellow 4s infinite linear;animation:move_left_yellow 4s infinite linear}.base1 .green{background:#159756;-webkit-animation:move_left_green 4s infinite linear;-moz-animation:move_left_green 4s infinite linear;-ms-animation:move_left_green 4s infinite linear;animation:move_left_green 4s infinite linear}@-webkit-keyframes move_left_red{0%{-webkit-transform:translateX(100%)}100%,25%,50%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_left_red{0%{-moz-transform:translateX(100%)}100%,25%,50%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_left_red{0%{-ms-transform:translateX(100%)}100%,25%,50%,75%{-ms-transform:translateX(0%)}}@keyframes move_left_red{0%{transform:translateX(100%)}100%,25%,50%,75%{transform:translateX(0%)}}@-webkit-keyframes move_left_blue{0%,25%{-webkit-transform:translateX(100%)}100%,50%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_left_blue{0%,25%{-moz-transform:translateX(100%)}100%,50%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_left_blue{0%,25%{-ms-transform:translateX(100%)}100%,50%,75%{-ms-transform:translateX(0%)}}@keyframes move_left_blue{0%,25%{transform:translateX(100%)}100%,50%,75%{transform:translateX(0%)}}@-webkit-keyframes move_left_yellow{0%,25%,50%{-webkit-transform:translateX(100%)}100%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_left_yellow{0%,25%,50%{-moz-transform:translateX(100%)}100%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_left_yellow{0%,25%,50%{-ms-transform:translateX(100%)}100%,75%{-ms-transform:translateX(0%)}}@keyframes move_left_yellow{0%,25%,50%{transform:translateX(100%)}100%,75%{transform:translateX(0%)}}@-webkit-keyframes move_left_green{0%,25%,50%,75%{-webkit-transform:translateX(100%)}100%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_left_green{0%,25%,50%,75%{-moz-transform:translateX(100%)}100%{-moz-transform:translateX(0%)}}@-ms-keyframes move_left_green{0%,25%,50%,75%{-ms-transform:translateX(100%)}100%{-ms-transform:translateX(0%)}}@keyframes move_left_green{0%,25%,50%,75%{transform:translateX(100%)}100%{transform:translateX(0%)}}.base2 .red{background:#da4733;-webkit-animation:move_right_red 4s infinite linear;-moz-animation:move_right_red 4s infinite linear;-ms-animation:move_right_red 4s infinite linear;animation:move_right_red 4s infinite linear}.base2 .blue{background:#3b78e7;-webkit-animation:move_right_blue 4s infinite linear;-moz-animation:move_right_blue 4s infinite linear;-ms-animation:move_right_blue 4s infinite linear;animation:move_right_blue 4s infinite linear}.base2 .yellow{background:#fdba2c;-webkit-animation:move_right_yellow 4s infinite linear;-moz-animation:move_right_yellow 4s infinite linear;-ms-animation:move_right_yellow 4s infinite linear;animation:move_right_yellow 4s infinite linear}.base2 .green{background:#159756;-webkit-animation:move_right_green 4s infinite linear;-moz-animation:move_right_green 4s infinite linear;-ms-animation:move_right_green 4s infinite linear;animation:move_right_green 4s infinite linear}@-webkit-keyframes move_right_red{0%{-webkit-transform:translateX(-100%)}100%,25%,50%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_right_red{0%{-moz-transform:translateX(-100%)}100%,25%,50%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_right_red{0%{-ms-transform:translateX(-100%)}100%,25%,50%,75%{-ms-transform:translateX(0%)}}@keyframes move_right_red{0%{transform:translateX(-100%)}100%,25%,50%,75%{transform:translateX(0%)}}@-webkit-keyframes move_right_blue{0%,25%{-webkit-transform:translateX(-100%)}100%,50%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_right_blue{0%,25%{-moz-transform:translateX(-100%)}100%,50%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_right_blue{0%,25%{-ms-transform:translateX(-100%)}100%,50%,75%{-ms-transform:translateX(0%)}}@keyframes move_right_blue{0%,25%{transform:translateX(-100%)}100%,50%,75%{transform:translateX(0%)}}@-webkit-keyframes move_right_yellow{0%,25%,50%{-webkit-transform:translateX(-100%)}100%,75%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_right_yellow{0%,25%,50%{-moz-transform:translateX(-100%)}100%,75%{-moz-transform:translateX(0%)}}@-ms-keyframes move_right_yellow{0%,25%,50%{-ms-transform:translateX(-100%)}100%,75%{-ms-transform:translateX(0%)}}@keyframes move_right_yellow{0%,25%,50%{transform:translateX(-100%)}100%,75%{transform:translateX(0%)}}@-webkit-keyframes move_right_green{0%,25%,50%,75%{-webkit-transform:translateX(-100%)}100%{-webkit-transform:translateX(0%)}}@-moz-keyframes move_right_green{0%,25%,50%,75%{-moz-transform:translateX(-100%)}100%{-moz-transform:translateX(0%)}}@-ms-keyframes move_right_green{0%,25%,50%,75%{-ms-transform:translateX(-100%)}100%{-ms-transform:translateX(0%)}}@keyframes move_right_green{0%,25%,50%,75%{transform:translateX(-100%)}100%{transform:translateX(0%)}} 2 | -------------------------------------------------------------------------------- /css/materialPreloader.css: -------------------------------------------------------------------------------- 1 | .load-bar { 2 | position:fixed; 3 | bottom:0; 4 | height:5px; 5 | width:100%; 6 | opacity: 1; 7 | -webkit-transition: opacity 0.2s linear; 8 | transition: opacity 0.2s linear; 9 | } 10 | 11 | .load-bar.invisible { 12 | opacity: 0; 13 | -webkit-transition: opacity 0.2s linear; 14 | transition: opacity 0.2s linear; 15 | } 16 | 17 | .load-bar-container { 18 | float:left; 19 | width:50%; 20 | height:100%; 21 | overflow:hidden 22 | } 23 | 24 | .load-bar .load-bar-container:last-child { 25 | float:right; 26 | -moz-transform-origin:top right; 27 | -ms-transform-origin:top right; 28 | -webkit-transform-origin:top right 29 | } 30 | 31 | .load-bar-base { 32 | float:left; 33 | width:100%; 34 | height:100%; 35 | overflow:hidden; 36 | position:relative; 37 | background:#159756 38 | } 39 | 40 | .color { 41 | width:100%; 42 | height:100%; 43 | float:left; 44 | position:absolute 45 | } 46 | 47 | .base1 .red { 48 | background:#da4733; 49 | -webkit-animation:move_left_red 4s infinite linear; 50 | -moz-animation:move_left_red 4s infinite linear; 51 | -ms-animation:move_left_red 4s infinite linear; 52 | animation:move_left_red 4s infinite linear 53 | } 54 | 55 | .base1 .blue { 56 | background:#3b78e7; 57 | -webkit-animation:move_left_blue 4s infinite linear; 58 | -moz-animation:move_left_blue 4s infinite linear; 59 | -ms-animation:move_left_blue 4s infinite linear; 60 | animation:move_left_blue 4s infinite linear 61 | } 62 | 63 | .base1 .yellow { 64 | background:#fdba2c; 65 | -webkit-animation:move_left_yellow 4s infinite linear; 66 | -moz-animation:move_left_yellow 4s infinite linear; 67 | -ms-animation:move_left_yellow 4s infinite linear; 68 | animation:move_left_yellow 4s infinite linear 69 | } 70 | 71 | .base1 .green { 72 | background:#159756; 73 | -webkit-animation:move_left_green 4s infinite linear; 74 | -moz-animation:move_left_green 4s infinite linear; 75 | -ms-animation:move_left_green 4s infinite linear; 76 | animation:move_left_green 4s infinite linear 77 | } 78 | 79 | @-webkit-keyframes move_left_red { 80 | 0% { 81 | -webkit-transform:translateX(100%) 82 | } 83 | 84 | 25% { 85 | -webkit-transform:translateX(0%) 86 | } 87 | 88 | 50% { 89 | -webkit-transform:translateX(0%) 90 | } 91 | 92 | 75% { 93 | -webkit-transform:translateX(0%) 94 | } 95 | 96 | 100% { 97 | -webkit-transform:translateX(0%) 98 | } 99 | } 100 | 101 | @-moz-keyframes move_left_red { 102 | 0% { 103 | -moz-transform:translateX(100%) 104 | } 105 | 106 | 25% { 107 | -moz-transform:translateX(0%) 108 | } 109 | 110 | 50% { 111 | -moz-transform:translateX(0%) 112 | } 113 | 114 | 75% { 115 | -moz-transform:translateX(0%) 116 | } 117 | 118 | 100% { 119 | -moz-transform:translateX(0%) 120 | } 121 | } 122 | 123 | @-ms-keyframes move_left_red { 124 | 0% { 125 | -ms-transform:translateX(100%) 126 | } 127 | 128 | 25% { 129 | -ms-transform:translateX(0%) 130 | } 131 | 132 | 50% { 133 | -ms-transform:translateX(0%) 134 | } 135 | 136 | 75% { 137 | -ms-transform:translateX(0%) 138 | } 139 | 140 | 100% { 141 | -ms-transform:translateX(0%) 142 | } 143 | } 144 | 145 | @keyframes move_left_red { 146 | 0% { 147 | transform:translateX(100%) 148 | } 149 | 150 | 25% { 151 | transform:translateX(0%) 152 | } 153 | 154 | 50% { 155 | transform:translateX(0%) 156 | } 157 | 158 | 75% { 159 | transform:translateX(0%) 160 | } 161 | 162 | 100% { 163 | transform:translateX(0%) 164 | } 165 | } 166 | 167 | @-webkit-keyframes move_left_blue { 168 | 0% { 169 | -webkit-transform:translateX(100%) 170 | } 171 | 172 | 25% { 173 | -webkit-transform:translateX(100%) 174 | } 175 | 176 | 50% { 177 | -webkit-transform:translateX(0%) 178 | } 179 | 180 | 75% { 181 | -webkit-transform:translateX(0%) 182 | } 183 | 184 | 100% { 185 | -webkit-transform:translateX(0%) 186 | } 187 | } 188 | 189 | @-moz-keyframes move_left_blue { 190 | 0% { 191 | -moz-transform:translateX(100%) 192 | } 193 | 194 | 25% { 195 | -moz-transform:translateX(100%) 196 | } 197 | 198 | 50% { 199 | -moz-transform:translateX(0%) 200 | } 201 | 202 | 75% { 203 | -moz-transform:translateX(0%) 204 | } 205 | 206 | 100% { 207 | -moz-transform:translateX(0%) 208 | } 209 | } 210 | 211 | @-ms-keyframes move_left_blue { 212 | 0% { 213 | -ms-transform:translateX(100%) 214 | } 215 | 216 | 25% { 217 | -ms-transform:translateX(100%) 218 | } 219 | 220 | 50% { 221 | -ms-transform:translateX(0%) 222 | } 223 | 224 | 75% { 225 | -ms-transform:translateX(0%) 226 | } 227 | 228 | 100% { 229 | -ms-transform:translateX(0%) 230 | } 231 | } 232 | 233 | @keyframes move_left_blue { 234 | 0% { 235 | transform:translateX(100%) 236 | } 237 | 238 | 25% { 239 | transform:translateX(100%) 240 | } 241 | 242 | 50% { 243 | transform:translateX(0%) 244 | } 245 | 246 | 75% { 247 | transform:translateX(0%) 248 | } 249 | 250 | 100% { 251 | transform:translateX(0%) 252 | } 253 | } 254 | 255 | @-webkit-keyframes move_left_yellow { 256 | 0% { 257 | -webkit-transform:translateX(100%) 258 | } 259 | 260 | 25% { 261 | -webkit-transform:translateX(100%) 262 | } 263 | 264 | 50% { 265 | -webkit-transform:translateX(100%) 266 | } 267 | 268 | 75% { 269 | -webkit-transform:translateX(0%) 270 | } 271 | 272 | 100% { 273 | -webkit-transform:translateX(0%) 274 | } 275 | } 276 | 277 | @-moz-keyframes move_left_yellow { 278 | 0% { 279 | -moz-transform:translateX(100%) 280 | } 281 | 282 | 25% { 283 | -moz-transform:translateX(100%) 284 | } 285 | 286 | 50% { 287 | -moz-transform:translateX(100%) 288 | } 289 | 290 | 75% { 291 | -moz-transform:translateX(0%) 292 | } 293 | 294 | 100% { 295 | -moz-transform:translateX(0%) 296 | } 297 | } 298 | 299 | @-ms-keyframes move_left_yellow { 300 | 0% { 301 | -ms-transform:translateX(100%) 302 | } 303 | 304 | 25% { 305 | -ms-transform:translateX(100%) 306 | } 307 | 308 | 50% { 309 | -ms-transform:translateX(100%) 310 | } 311 | 312 | 75% { 313 | -ms-transform:translateX(0%) 314 | } 315 | 316 | 100% { 317 | -ms-transform:translateX(0%) 318 | } 319 | } 320 | 321 | @keyframes move_left_yellow { 322 | 0% { 323 | transform:translateX(100%) 324 | } 325 | 326 | 25% { 327 | transform:translateX(100%) 328 | } 329 | 330 | 50% { 331 | transform:translateX(100%) 332 | } 333 | 334 | 75% { 335 | transform:translateX(0%) 336 | } 337 | 338 | 100% { 339 | transform:translateX(0%) 340 | } 341 | } 342 | 343 | @-webkit-keyframes move_left_green { 344 | 0% { 345 | -webkit-transform:translateX(100%) 346 | } 347 | 348 | 25% { 349 | -webkit-transform:translateX(100%) 350 | } 351 | 352 | 50% { 353 | -webkit-transform:translateX(100%) 354 | } 355 | 356 | 75% { 357 | -webkit-transform:translateX(100%) 358 | } 359 | 360 | 100% { 361 | -webkit-transform:translateX(0%) 362 | } 363 | } 364 | 365 | @-moz-keyframes move_left_green { 366 | 0% { 367 | -moz-transform:translateX(100%) 368 | } 369 | 370 | 25% { 371 | -moz-transform:translateX(100%) 372 | } 373 | 374 | 50% { 375 | -moz-transform:translateX(100%) 376 | } 377 | 378 | 75% { 379 | -moz-transform:translateX(100%) 380 | } 381 | 382 | 100% { 383 | -moz-transform:translateX(0%) 384 | } 385 | } 386 | 387 | @-ms-keyframes move_left_green { 388 | 0% { 389 | -ms-transform:translateX(100%) 390 | } 391 | 392 | 25% { 393 | -ms-transform:translateX(100%) 394 | } 395 | 396 | 50% { 397 | -ms-transform:translateX(100%) 398 | } 399 | 400 | 75% { 401 | -ms-transform:translateX(100%) 402 | } 403 | 404 | 100% { 405 | -ms-transform:translateX(0%) 406 | } 407 | } 408 | 409 | @keyframes move_left_green { 410 | 0% { 411 | transform:translateX(100%) 412 | } 413 | 414 | 25% { 415 | transform:translateX(100%) 416 | } 417 | 418 | 50% { 419 | transform:translateX(100%) 420 | } 421 | 422 | 75% { 423 | transform:translateX(100%) 424 | } 425 | 426 | 100% { 427 | transform:translateX(0%) 428 | } 429 | } 430 | 431 | .base2 .red { 432 | background:#da4733; 433 | -webkit-animation:move_right_red 4s infinite linear; 434 | -moz-animation:move_right_red 4s infinite linear; 435 | -ms-animation:move_right_red 4s infinite linear; 436 | animation:move_right_red 4s infinite linear 437 | } 438 | 439 | .base2 .blue { 440 | background:#3b78e7; 441 | -webkit-animation:move_right_blue 4s infinite linear; 442 | -moz-animation:move_right_blue 4s infinite linear; 443 | -ms-animation:move_right_blue 4s infinite linear; 444 | animation:move_right_blue 4s infinite linear 445 | } 446 | 447 | .base2 .yellow { 448 | background:#fdba2c; 449 | -webkit-animation:move_right_yellow 4s infinite linear; 450 | -moz-animation:move_right_yellow 4s infinite linear; 451 | -ms-animation:move_right_yellow 4s infinite linear; 452 | animation:move_right_yellow 4s infinite linear 453 | } 454 | 455 | .base2 .green { 456 | background:#159756; 457 | -webkit-animation:move_right_green 4s infinite linear; 458 | -moz-animation:move_right_green 4s infinite linear; 459 | -ms-animation:move_right_green 4s infinite linear; 460 | animation:move_right_green 4s infinite linear 461 | } 462 | 463 | @-webkit-keyframes move_right_red { 464 | 0% { 465 | -webkit-transform:translateX(-100%) 466 | } 467 | 468 | 25% { 469 | -webkit-transform:translateX(0%) 470 | } 471 | 472 | 50% { 473 | -webkit-transform:translateX(0%) 474 | } 475 | 476 | 75% { 477 | -webkit-transform:translateX(0%) 478 | } 479 | 480 | 100% { 481 | -webkit-transform:translateX(0%) 482 | } 483 | } 484 | 485 | @-moz-keyframes move_right_red { 486 | 0% { 487 | -moz-transform:translateX(-100%) 488 | } 489 | 490 | 25% { 491 | -moz-transform:translateX(0%) 492 | } 493 | 494 | 50% { 495 | -moz-transform:translateX(0%) 496 | } 497 | 498 | 75% { 499 | -moz-transform:translateX(0%) 500 | } 501 | 502 | 100% { 503 | -moz-transform:translateX(0%) 504 | } 505 | } 506 | 507 | @-ms-keyframes move_right_red { 508 | 0% { 509 | -ms-transform:translateX(-100%) 510 | } 511 | 512 | 25% { 513 | -ms-transform:translateX(0%) 514 | } 515 | 516 | 50% { 517 | -ms-transform:translateX(0%) 518 | } 519 | 520 | 75% { 521 | -ms-transform:translateX(0%) 522 | } 523 | 524 | 100% { 525 | -ms-transform:translateX(0%) 526 | } 527 | } 528 | 529 | @keyframes move_right_red { 530 | 0% { 531 | transform:translateX(-100%) 532 | } 533 | 534 | 25% { 535 | transform:translateX(0%) 536 | } 537 | 538 | 50% { 539 | transform:translateX(0%) 540 | } 541 | 542 | 75% { 543 | transform:translateX(0%) 544 | } 545 | 546 | 100% { 547 | transform:translateX(0%) 548 | } 549 | } 550 | 551 | @-webkit-keyframes move_right_blue { 552 | 0% { 553 | -webkit-transform:translateX(-100%) 554 | } 555 | 556 | 25% { 557 | -webkit-transform:translateX(-100%) 558 | } 559 | 560 | 50% { 561 | -webkit-transform:translateX(0%) 562 | } 563 | 564 | 75% { 565 | -webkit-transform:translateX(0%) 566 | } 567 | 568 | 100% { 569 | -webkit-transform:translateX(0%) 570 | } 571 | } 572 | 573 | @-moz-keyframes move_right_blue { 574 | 0% { 575 | -moz-transform:translateX(-100%) 576 | } 577 | 578 | 25% { 579 | -moz-transform:translateX(-100%) 580 | } 581 | 582 | 50% { 583 | -moz-transform:translateX(0%) 584 | } 585 | 586 | 75% { 587 | -moz-transform:translateX(0%) 588 | } 589 | 590 | 100% { 591 | -moz-transform:translateX(0%) 592 | } 593 | } 594 | 595 | @-ms-keyframes move_right_blue { 596 | 0% { 597 | -ms-transform:translateX(-100%) 598 | } 599 | 600 | 25% { 601 | -ms-transform:translateX(-100%) 602 | } 603 | 604 | 50% { 605 | -ms-transform:translateX(0%) 606 | } 607 | 608 | 75% { 609 | -ms-transform:translateX(0%) 610 | } 611 | 612 | 100% { 613 | -ms-transform:translateX(0%) 614 | } 615 | } 616 | 617 | @keyframes move_right_blue { 618 | 0% { 619 | transform:translateX(-100%) 620 | } 621 | 622 | 25% { 623 | transform:translateX(-100%) 624 | } 625 | 626 | 50% { 627 | transform:translateX(0%) 628 | } 629 | 630 | 75% { 631 | transform:translateX(0%) 632 | } 633 | 634 | 100% { 635 | transform:translateX(0%) 636 | } 637 | } 638 | 639 | @-webkit-keyframes move_right_yellow { 640 | 0% { 641 | -webkit-transform:translateX(-100%) 642 | } 643 | 644 | 25% { 645 | -webkit-transform:translateX(-100%) 646 | } 647 | 648 | 50% { 649 | -webkit-transform:translateX(-100%) 650 | } 651 | 652 | 75% { 653 | -webkit-transform:translateX(0%) 654 | } 655 | 656 | 100% { 657 | -webkit-transform:translateX(0%) 658 | } 659 | } 660 | 661 | @-moz-keyframes move_right_yellow { 662 | 0% { 663 | -moz-transform:translateX(-100%) 664 | } 665 | 666 | 25% { 667 | -moz-transform:translateX(-100%) 668 | } 669 | 670 | 50% { 671 | -moz-transform:translateX(-100%) 672 | } 673 | 674 | 75% { 675 | -moz-transform:translateX(0%) 676 | } 677 | 678 | 100% { 679 | -moz-transform:translateX(0%) 680 | } 681 | } 682 | 683 | @-ms-keyframes move_right_yellow { 684 | 0% { 685 | -ms-transform:translateX(-100%) 686 | } 687 | 688 | 25% { 689 | -ms-transform:translateX(-100%) 690 | } 691 | 692 | 50% { 693 | -ms-transform:translateX(-100%) 694 | } 695 | 696 | 75% { 697 | -ms-transform:translateX(0%) 698 | } 699 | 700 | 100% { 701 | -ms-transform:translateX(0%) 702 | } 703 | } 704 | 705 | @keyframes move_right_yellow { 706 | 0% { 707 | transform:translateX(-100%) 708 | } 709 | 710 | 25% { 711 | transform:translateX(-100%) 712 | } 713 | 714 | 50% { 715 | transform:translateX(-100%) 716 | } 717 | 718 | 75% { 719 | transform:translateX(0%) 720 | } 721 | 722 | 100% { 723 | transform:translateX(0%) 724 | } 725 | } 726 | 727 | @-webkit-keyframes move_right_green { 728 | 0% { 729 | -webkit-transform:translateX(-100%) 730 | } 731 | 732 | 25% { 733 | -webkit-transform:translateX(-100%) 734 | } 735 | 736 | 50% { 737 | -webkit-transform:translateX(-100%) 738 | } 739 | 740 | 75% { 741 | -webkit-transform:translateX(-100%) 742 | } 743 | 744 | 100% { 745 | -webkit-transform:translateX(0%) 746 | } 747 | } 748 | 749 | @-moz-keyframes move_right_green { 750 | 0% { 751 | -moz-transform:translateX(-100%) 752 | } 753 | 754 | 25% { 755 | -moz-transform:translateX(-100%) 756 | } 757 | 758 | 50% { 759 | -moz-transform:translateX(-100%) 760 | } 761 | 762 | 75% { 763 | -moz-transform:translateX(-100%) 764 | } 765 | 766 | 100% { 767 | -moz-transform:translateX(0%) 768 | } 769 | } 770 | 771 | @-ms-keyframes move_right_green { 772 | 0% { 773 | -ms-transform:translateX(-100%) 774 | } 775 | 776 | 25% { 777 | -ms-transform:translateX(-100%) 778 | } 779 | 780 | 50% { 781 | -ms-transform:translateX(-100%) 782 | } 783 | 784 | 75% { 785 | -ms-transform:translateX(-100%) 786 | } 787 | 788 | 100% { 789 | -ms-transform:translateX(0%) 790 | } 791 | } 792 | 793 | @keyframes move_right_green { 794 | 0% { 795 | transform:translateX(-100%) 796 | } 797 | 798 | 25% { 799 | transform:translateX(-100%) 800 | } 801 | 802 | 50% { 803 | transform:translateX(-100%) 804 | } 805 | 806 | 75% { 807 | transform:translateX(-100%) 808 | } 809 | 810 | 100% { 811 | transform:translateX(0%) 812 | } 813 | } 814 | --------------------------------------------------------------------------------