Add a first version of data-mask

raphaelfabeni · Nov 7, 2016 · 1b5d2e7 · 1b5d2e7
1 parent 53181db
commit 1b5d2e7
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/examples/index-loading.html b/examples/index-loading.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Loader</title>
+
+  <style>
+    .container {
+      max-width: 800px;
+      width: 100%;
+      margin: 0 auto;
+      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    }
+  </style>
+
+  <link rel="stylesheet" href="../dist/css-loader.css">
+</head>
+<body>
+
+  <!-- Loader -->
+  <div class="loader loader-text is-active"></div>
+
+  <!-- Fake content -->
+  <div class="container">
+    <h1>Lorem ipsum dolor sit amet.</h1>
+    <p>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!</p>
+    <p>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!</p>
+    <p>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!</p>
+    <ul>
+      <li>Lorem ipsum dolor sit.</li>
+      <li>Lorem ipsum dolor sit.</li>
+      <li>Lorem ipsum dolor sit.</li>
+      <li>Lorem ipsum dolor sit.</li>
+    </ul>
+    <h2>Lorem ipsum dolor sit amet.</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
+  </div>
+</body>
+</html>
diff --git a/src/loaders/_loader-text.sass b/src/loaders/_loader-text.sass
@@ -0,0 +1,47 @@
+$loader-mask--size: 100px
+$loader-mask--color: #666
+$loader-mask--color-mask: #f1c40f
+
+.loader-text
+
+  &:before,
+  &:after
+    position: fixed
+    width: 100%
+    top: 50%
+    margin-top: - $loader-mask--size / 2
+    font-size: $loader-mask--size
+    content: 'Loading'
+    text-align: center
+    font-family: $font-loader
+    overflow: hidden
+    line-height: 1.2
+    animation: maskBottom 2s linear infinite alternate both
+
+  &:before
+    color: $loader-mask--color
+
+  &:after
+    color: $loader-mask--color-mask
+    height: 0
+    animation: mask 1s linear infinite alternate
+
+@keyframes maskBottom
+  0%
+    color: #2ecc71
+
+  50%
+    color: #2ecc71
+
+  51%
+    color: #3498db
+
+  100%
+    color: #3498db
+
+@keyframes mask
+  0%
+    height: 0
+
+  100%
+    height: $loader-mask--size * 1.2