| 
| 
| 
| 
| 
-|:---:|:---:|:---:|:---:|:---:|:---:|
-| 43+ ✔ | 16+ ✔ | 10+ ✔ | 30+ ✔ | 9+ ✔ | 5.2+ ✔
-
-Based on _Can i Use_. One thing to note is the CSS file has no browsers prefixes, but you can easily add and increase the support of the browsers.
-
-## Licence
-
-[MIT License](https://raphaelfabeni.mit-license.org/) © Raphael Fabeni
-
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..27e10c3
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,219 @@
+*,
+*:after,
+*:before {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+/* General */
+body {
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 400;
+ background-color: #fff;
+ color: #444;
+ font-size: 16px;
+}
+
+.container {
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+/* Header and footer*/
+.footer {
+ background-color: #1abc9c;
+ color: #fff;
+ text-align: center;
+ padding: 20px;
+ border-top: solid 15px #16a085;
+ margin-top: 25px;
+}
+
+.header {
+ background-color: #1abc9c;
+ color: #fff;
+ text-align: center;
+ padding: 50px 20px;
+ border-bottom: solid 15px #16a085;
+ margin-bottom: 25px;
+ position: relative;
+}
+
+.header__title {
+ font-weight: 700;
+ text-shadow: 1px 1px 0 rgba(0,0,0,.2);
+ font-size: 54px;
+ letter-spacing: -2px;
+}
+
+.header__title:before,
+.header__title:after {
+ content: '';
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border: solid 5px #16a085;
+ border-right-color: transparent;
+ vertical-align: middle;
+ border-radius: 50%;
+ animation: rotation 1s infinite linear;
+}
+
+.header__title:before {
+ margin-right: 10px;
+}
+
+.header__title:after {
+ margin-left: 10px;
+ animation-duration: 1.5s;
+}
+
+.header__subtitle {
+ font-weight: 300;
+ text-shadow: 1px 1px 0 rgba(0,0,0,.2);
+ font-size: 24px;
+}
+
+@keyframes pulse {
+ to { transform: scale(1.2); }
+}
+
+@keyframes rotation {
+ to { transform: rotate(359deg); }
+}
+
+.heart {
+ color: #e74c3c;
+ display: inline-block;
+ vertical-align: bottom;
+ font-size: 22px;
+ animation: pulse .5s linear infinite alternate;
+}
+
+.heart--small {
+ font-size: 16px;
+ vertical-align: middle;
+}
+
+/* Grid */
+.row {
+ max-width: 850px;
+ width: 100%;
+ margin: 0 auto;
+}
+
+.row--space {
+ margin-bottom: 25px;
+}
+
+.row--flex {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+}
+
+/* Box */
+.box {
+ padding: 15px;
+ background-color: #f5f5f5;
+ border: solid 1px #dedede;
+ margin: 10px 10px 10px 0;
+}
+
+.box--full {
+ width: 100%;
+ margin-right: 0;
+}
+
+.box__item {
+ display: inline-block;
+ margin: 8px 0;
+}
+
+.box__title {
+ font-size: 18px;
+ color: #666;
+ margin-bottom: 15px;
+}
+
+/* Buttons */
+.button {
+ cursor: pointer;
+ display: inline-block;
+ border: none;
+ background-color: #1abc9c;
+ color: #fff;
+ font-size: 14px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ text-shadow: 1px 1px 0 rgba(0,0,0,.25);
+ box-shadow: 0 5px 0 0 #16a085;
+ transition: background .3s ease;
+}
+
+.button:hover,
+.button:focus {
+ background-color: #049372;
+ outline: none;
+}
+
+.button:active {
+ transform: translateY(5px);
+ box-shadow: none;
+}
+
+/* Input */
+.input {
+ display: inline-block;
+ padding: 8px;
+ max-width: 90px;
+ transition: all .3s ease;
+ border: solid 1px #eee;
+}
+
+.input:focus {
+ border-color: #ccc;
+}
+
+/* Typography */
+.title,
+p {
+ margin-bottom: 15px;
+}
+
+a {
+ color: #16a085;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+.text-yellow {
+ color: #f1c40f;
+}
+
+.text-white {
+ color: #fff;
+}
+
+/* Media */
+@media screen and (max-width: 550px) {
+
+ .header {
+ padding: 25px 10px;
+ }
+
+ .header__title {
+ font-size: 32px;
+ letter-spacing: 0;
+ margin-bottom: 15px;
+ }
+
+ .header__subtitle {
+ font-size: 20px;
+ line-height: 1.4;
+ }
+
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..3cb0d64
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,301 @@
+(function() {
+
+ var loader = document.getElementById('loader');
+
+ var config = [
+ {
+ button: document.getElementById('loader-default'),
+ className: 'loader-default'
+ },
+ {
+ button: document.getElementById('loader-default-half'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: 'data-half' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-blink'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: 'data-blink' },
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-inverse'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: 'data-inverse' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-text'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-custom-text'),
+ className: 'loader-default',
+ attributes: [
+ {
+ attribute: 'data-text',
+ value: document.getElementById('custom-text')
+ }
+ ]
+ },
+ {
+ button: document.getElementById('loader-double'),
+ className: 'loader-double'
+ },
+ {
+ button: document.getElementById('loader-bar'),
+ className: 'loader-bar'
+ },
+ {
+ button: document.getElementById('loader-bar-rounded'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: 'data-rounded' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-inverse'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: 'data-inverse' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-text'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-blink'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: 'data-blink' },
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-custom-text'),
+ className: 'loader-bar',
+ attributes: [
+ {
+ attribute: 'data-text',
+ value: document.getElementById('bar-custom-text')
+ }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-ping-pong'),
+ className: 'loader-bar-ping-pong'
+ },
+ {
+ button: document.getElementById('loader-bar-ping-pong-rounded'),
+ className: 'loader-bar-ping-pong',
+ attributes: [
+ { attribute: 'data-rounded' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-border'),
+ className: 'loader-border'
+ },
+ {
+ button: document.getElementById('loader-border-text'),
+ className: 'loader-border',
+ attributes: [
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-border-custom-text'),
+ className: 'loader-border',
+ attributes: [
+ {
+ attribute: 'data-text',
+ value: document.getElementById('border-custom-text')
+ }
+ ]
+ },
+ {
+ button: document.getElementById('loader-border-blink'),
+ className: 'loader-border',
+ attributes: [
+ { attribute: 'data-text' },
+ { attribute: 'data-blink' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-ball'),
+ className: 'loader-ball'
+ },
+ {
+ button: document.getElementById('loader-ball-shadow'),
+ className: 'loader-ball',
+ attributes: [
+ { attribute: 'data-shadow' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bouncing'),
+ className: 'loader-bouncing'
+ },
+ {
+ button: document.getElementById('loader-smartphone'),
+ className: 'loader-smartphone'
+ },
+ {
+ button: document.getElementById('loader-smartphone-text'),
+ className: 'loader-smartphone',
+ attributes: [
+ { attribute: 'data-screen' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-smartphone-custom-text'),
+ className: 'loader-smartphone',
+ attributes: [
+ {
+ attribute: 'data-screen',
+ value: document.getElementById('smartphone-custom-text')
+ }
+ ]
+ },
+ {
+ button: document.getElementById('loader-clock'),
+ className: 'loader-clock'
+ },
+ {
+ button: document.getElementById('loader-curtain'),
+ className: 'loader-curtain'
+ },
+ {
+ button: document.getElementById('loader-curtain-brazilian'),
+ className: 'loader-curtain',
+ attributes: [
+ { attribute: 'data-brazilian' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-curtain-colorful'),
+ className: 'loader-curtain',
+ attributes: [
+ { attribute: 'data-colorful' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-curtain-custom-text'),
+ className: 'loader-curtain',
+ attributes: [
+ {
+ attribute: 'data-curtain-text',
+ value: document.getElementById('curtain-custom-text')
+ }
+ ]
+ },
+ {
+ button: document.getElementById('loader-music-hey-oh'),
+ className: 'loader-music',
+ attributes: [
+ { attribute: 'data-hey-oh' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-music-no-cry'),
+ className: 'loader-music',
+ attributes: [
+ { attribute: 'data-no-cry' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-music-we-are'),
+ className: 'loader-music',
+ attributes: [
+ { attribute: 'data-we-are' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-music-rock-you'),
+ className: 'loader-music',
+ attributes: [
+ { attribute: 'data-rock-you' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-pokeball'),
+ className: 'loader-pokeball'
+ }
+ ];
+
+ var timer;
+
+ // Bindings
+ loader.addEventListener('click', function() {
+ for (var i = this.attributes.length - 1; i >= 0; i--){
+ if(this.attributes[i].name !== 'id') {
+ this.removeAttribute(this.attributes[i].name);
+ }
+ }
+ clearTimeout(timer);
+ });
+
+ for(var i = 0; i < config.length; i++) {
+
+ (function(i) {
+
+ config[i]['button'].addEventListener('click', function() {
+
+ // Attributes
+ if(config[i]['attributes']) {
+ for(var j = 0; j < config[i]['attributes'].length; j++ ) {
+
+ var tempAttribute = config[i]['attributes'][j];
+ var tempValue = tempAttribute['value'] ? tempAttribute['value'].value : '';
+
+ loader.setAttribute(tempAttribute['attribute'], tempValue);
+ }
+ }
+
+ // Show loader
+ loader.classList.add('loader', config[i]['className'], 'is-active')
+
+ // Hide loader after some time
+ hideLoader(config[i]['className'], config[i]['attributes'] ? config[i]['attributes'] : []);
+ });
+
+ })(i);
+
+ }
+
+ function hideLoader(param, attr) {
+ timer = setTimeout(function() {
+ loader.classList.remove('is-active', param, 'loader');
+ for(var k = 0; k < attr.length; k++) {
+ loader.removeAttribute(attr[k]['attribute']);
+ }
+ }, 5000);
+ }
+
+ // Hash
+
+ if(window.location.hash) {
+ var loaderHash = window.location.hash.split('#/')[1];
+ var event = document.createEvent('HTMLEvents');
+
+ event.initEvent('click', true, false);
+ document.getElementById(loaderHash).dispatchEvent(event);
+ setTimeout(function() {
+ history.pushState('', document.title, window.location.pathname);
+ }, 2000);
+
+ }
+
+})();
\ No newline at end of file
diff --git a/css-loader-share.png b/css-loader-share.png
new file mode 100644
index 0000000..d07f841
Binary files /dev/null and b/css-loader-share.png differ
diff --git a/dist/css-loader.css b/dist/css-loader.css
deleted file mode 100644
index bd6c573..0000000
--- a/dist/css-loader.css
+++ /dev/null
@@ -1 +0,0 @@
-.loader{color:#fff;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box}.loader.is-active{background-color:rgba(0,0,0,0.85);width:100%;height:100%;left:0;top:0}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes blink{from{opacity:.5}to{opacity:1}}.loader[data-text]:before{position:fixed;left:0;top:50%;color:currentColor;font-family:Helvetica, Arial, sans-serif;text-align:center;width:100%}.loader[data-text='']:before{content:'Loading'}.loader:not([data-text='']):before{content:attr(data-text)}.loader[blink]:before{animation:blink 1s linear infinite alternate}.loader-default[data-text]:before{top:calc(50% - 63px)}.loader-default:after{content:'';position:fixed;width:48px;height:48px;border:solid 8px #fff;border-left-color:transparent;border-radius:50%;top:calc(50% - 24px);left:calc(50% - 24px);animation:rotation 1s linear infinite}.loader-default[half]:after{border-right-color:transparent}.loader-default[inverse]:after{animation-direction:reverse}.loader-double:after,.loader-double:before{content:'';position:fixed;border-radius:50%;border:solid 8px;animation:rotation 1s linear infinite}.loader-double:after{width:48px;height:48px;border-color:#fff;border-left-color:transparent;top:calc(50% - 24px);left:calc(50% - 24px)}.loader-double:before{width:64px;height:64px;border-color:#eb974e;border-right-color:transparent;animation-duration:2s;top:calc(50% - 32px);left:calc(50% - 32px)}.loader-bar[data-text]:before{top:calc(50% - 40px)}.loader-bar:after{content:'';position:fixed;top:50%;left:50%;width:200px;height:20px;transform:translate(-50%, -50%);background:linear-gradient(-45deg, #4183d7 25%, #52b3d9 25%, #52b3d9 50%, #4183d7 50%, #4183d7 75%, #52b3d9 75%, #52b3d9);background-size:20px 20px;box-shadow:inset 0 10px 0 rgba(255,255,255,0.2),0 0 0 5px rgba(0,0,0,0.2);animation:moveBar 1.5s linear infinite}.loader-bar[rounded]:after{border-radius:15px}@keyframes moveBar{from{background-position:0 0}to{background-position:20px 20px}}@keyframes corners{6%{width:60px;height:15px}25%{width:15px;height:15px;left:calc(100% - 15px);top:0}31%{height:60px}50%{height:15px;top:calc(100% - 15px);left:calc(100% - 15px)}56%{width:60px}75%{width:15px;left:0;top:calc(100% - 15px)}81%{height:60px}}.loader-border:after{content:'';position:absolute;top:0;left:0;width:15px;height:15px;background-color:#fff;animation:corners 3s ease both infinite}.loader-ball:before{content:'';position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;background-color:#fff;border-radius:50%;z-index:1;animation:kick 1s infinite alternate ease-in both}.loader-ball:after{content:'';position:absolute;background-color:rgba(0,0,0,0.3);border-radius:50%;width:45px;height:20px;top:calc(50% + 10px);left:50%;margin:0 0 0 -22.5px;z-index:0;animation:shadow 1s infinite alternate ease-out both}@keyframes shadow{0%,40%{background-color:transparent;transform:scale(0)}95%,100%{background-color:rgba(0,0,0,0.75);transform:scale(1)}}@keyframes kick{0%{transform:translateY(-80px) scaleX(0.95)}90%{border-radius:50%}100%{transform:translateY(0) scaleX(1);border-radius:50% 50% 35% 35%}}
diff --git a/dist/main.min.css b/dist/main.min.css
new file mode 100644
index 0000000..9536b3f
--- /dev/null
+++ b/dist/main.min.css
@@ -0,0 +1 @@
+.header__subtitle,.header__title{text-shadow:1px 1px 0 rgba(0,0,0,.2)}*,:after,:before{margin:0;padding:0;list-style:none}body{font-family:'Open Sans',sans-serif;font-weight:400;background-color:#fff;color:#444;font-size:16px}.footer,.header{background-color:#1abc9c;color:#fff;text-align:center}.container{padding-left:10px;padding-right:10px}.footer{padding:20px;border-top:solid 15px #16a085;margin-top:25px}.header{padding:50px 20px;border-bottom:solid 15px #16a085;margin-bottom:25px;position:relative}.header__title{font-weight:700;font-size:54px;letter-spacing:-2px}.header__title:after,.header__title:before{content:'';width:10px;height:10px;display:inline-block;border:5px solid #16a085;border-right-color:transparent;vertical-align:middle;border-radius:50%;animation:rotation 1s infinite linear}.header__title:before{margin-right:10px}.header__title:after{margin-left:10px;animation-duration:1.5s}.header__subtitle{font-weight:300;font-size:24px}@keyframes pulse{to{transform:scale(1.2)}}@keyframes rotation{to{transform:rotate(359deg)}}.heart{color:#e74c3c;display:inline-block;vertical-align:bottom;font-size:22px;animation:pulse .5s linear infinite alternate}.heart--small{font-size:16px;vertical-align:middle}.row{max-width:850px;width:100%;margin:0 auto}.row--space{margin-bottom:25px}.row--flex{display:flex;flex-flow:row wrap;justify-content:flex-start}.box__item,.button,.input{display:inline-block}.box{padding:15px;background-color:#f5f5f5;border:1px solid #dedede;margin:10px 10px 10px 0}.box--full{width:100%;margin-right:0}.box__item{margin:8px 0}.box__title,.title,p{margin-bottom:15px}.box__title{font-size:18px;color:#666}.button{cursor:pointer;border:none;background-color:#1abc9c;color:#fff;font-size:14px;padding:10px 20px;border-radius:5px;text-shadow:1px 1px 0 rgba(0,0,0,.25);box-shadow:0 5px 0 0 #16a085;transition:background .3s ease}.button:focus,.button:hover{background-color:#049372;outline:0}.button:active{transform:translateY(5px);box-shadow:none}.input{padding:8px;max-width:90px;transition:all .3s ease;border:1px solid #eee}.input:focus{border-color:#ccc}a{color:#16a085}a:hover{text-decoration:none}.text-yellow{color:#f1c40f}.text-white{color:#fff}@media screen and (max-width:550px){.header{padding:25px 10px}.header__title{font-size:32px;letter-spacing:0;margin-bottom:15px}.header__subtitle{font-size:20px;line-height:1.4}}
\ No newline at end of file
diff --git a/dist/main.min.js b/dist/main.min.js
new file mode 100644
index 0000000..398b115
--- /dev/null
+++ b/dist/main.min.js
@@ -0,0 +1 @@
+(function(){var loader=document.getElementById("loader");var config=[{button:document.getElementById("loader-default"),className:"loader-default"},{button:document.getElementById("loader-default-half"),className:"loader-default",attributes:[{attribute:"data-half"}]},{button:document.getElementById("loader-default-blink"),className:"loader-default",attributes:[{attribute:"data-blink"},{attribute:"data-text"}]},{button:document.getElementById("loader-default-inverse"),className:"loader-default",attributes:[{attribute:"data-inverse"}]},{button:document.getElementById("loader-default-text"),className:"loader-default",attributes:[{attribute:"data-text"}]},{button:document.getElementById("loader-default-custom-text"),className:"loader-default",attributes:[{attribute:"data-text",value:document.getElementById("custom-text")}]},{button:document.getElementById("loader-double"),className:"loader-double"},{button:document.getElementById("loader-bar"),className:"loader-bar"},{button:document.getElementById("loader-bar-rounded"),className:"loader-bar",attributes:[{attribute:"data-rounded"}]},{button:document.getElementById("loader-bar-inverse"),className:"loader-bar",attributes:[{attribute:"data-inverse"}]},{button:document.getElementById("loader-bar-text"),className:"loader-bar",attributes:[{attribute:"data-text"}]},{button:document.getElementById("loader-bar-blink"),className:"loader-bar",attributes:[{attribute:"data-blink"},{attribute:"data-text"}]},{button:document.getElementById("loader-bar-custom-text"),className:"loader-bar",attributes:[{attribute:"data-text",value:document.getElementById("bar-custom-text")}]},{button:document.getElementById("loader-bar-ping-pong"),className:"loader-bar-ping-pong"},{button:document.getElementById("loader-bar-ping-pong-rounded"),className:"loader-bar-ping-pong",attributes:[{attribute:"data-rounded"}]},{button:document.getElementById("loader-border"),className:"loader-border"},{button:document.getElementById("loader-border-text"),className:"loader-border",attributes:[{attribute:"data-text"}]},{button:document.getElementById("loader-border-custom-text"),className:"loader-border",attributes:[{attribute:"data-text",value:document.getElementById("border-custom-text")}]},{button:document.getElementById("loader-border-blink"),className:"loader-border",attributes:[{attribute:"data-text"},{attribute:"data-blink"}]},{button:document.getElementById("loader-ball"),className:"loader-ball"},{button:document.getElementById("loader-ball-shadow"),className:"loader-ball",attributes:[{attribute:"data-shadow"}]},{button:document.getElementById("loader-bouncing"),className:"loader-bouncing"},{button:document.getElementById("loader-smartphone"),className:"loader-smartphone"},{button:document.getElementById("loader-smartphone-text"),className:"loader-smartphone",attributes:[{attribute:"data-screen"}]},{button:document.getElementById("loader-smartphone-custom-text"),className:"loader-smartphone",attributes:[{attribute:"data-screen",value:document.getElementById("smartphone-custom-text")}]},{button:document.getElementById("loader-clock"),className:"loader-clock"},{button:document.getElementById("loader-curtain"),className:"loader-curtain"},{button:document.getElementById("loader-curtain-brazilian"),className:"loader-curtain",attributes:[{attribute:"data-brazilian"}]},{button:document.getElementById("loader-curtain-colorful"),className:"loader-curtain",attributes:[{attribute:"data-colorful"}]},{button:document.getElementById("loader-curtain-custom-text"),className:"loader-curtain",attributes:[{attribute:"data-curtain-text",value:document.getElementById("curtain-custom-text")}]},{button:document.getElementById("loader-music-hey-oh"),className:"loader-music",attributes:[{attribute:"data-hey-oh"}]},{button:document.getElementById("loader-music-no-cry"),className:"loader-music",attributes:[{attribute:"data-no-cry"}]},{button:document.getElementById("loader-music-we-are"),className:"loader-music",attributes:[{attribute:"data-we-are"}]},{button:document.getElementById("loader-music-rock-you"),className:"loader-music",attributes:[{attribute:"data-rock-you"}]},{button:document.getElementById("loader-pokeball"),className:"loader-pokeball"}];var timer;loader.addEventListener("click",function(){for(var i=this.attributes.length-1;i>=0;i--){if(this.attributes[i].name!=="id"){this.removeAttribute(this.attributes[i].name)}}clearTimeout(timer)});for(var i=0;iLorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolorem molestias accusamus doloribus culpa aliquid aliquam minima dignissimos esse reprehenderit, sed soluta earum iste amet accusantium. Dolorum facere rerum, omnis!
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.
-Usually it's common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). Gif images were great but using CSS we can avoid the image request, also it's easier for customize/ maintain and it's more cool. Check it out on GitHub.
+