Skip to content

Commit 1b5d2e7

Browse files
raphaelfabeniraphaelfabeni
committed
Add a first version of data-mask
1 parent 53181db commit 1b5d2e7

File tree

2 files changed

+88
-0
lines changed

2 files changed

+88
-0
lines changed

‎examples/index-loading.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Loader</title>
6+
7+
<style>
8+
.container {
9+
max-width: 800px;
10+
width: 100%;
11+
margin: 0 auto;
12+
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
13+
}
14+
</style>
15+
16+
<link rel="stylesheet" href="../dist/css-loader.css">
17+
</head>
18+
<body>
19+
20+
<!-- Loader -->
21+
<div class="loader loader-text is-active"></div>
22+
23+
<!-- Fake content -->
24+
<div class="container">
25+
<h1>Lorem ipsum dolor sit amet.</h1>
26+
<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>
27+
<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>
28+
<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>
29+
<ul>
30+
<li>Lorem ipsum dolor sit.</li>
31+
<li>Lorem ipsum dolor sit.</li>
32+
<li>Lorem ipsum dolor sit.</li>
33+
<li>Lorem ipsum dolor sit.</li>
34+
</ul>
35+
<h2>Lorem ipsum dolor sit amet.</h2>
36+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
37+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas perspiciatis id maxime placeat recusandae architecto, fuga dolorem molestiae tempora optio.</p>
39+
</div>
40+
</body>
41+
</html>

‎src/loaders/_loader-text.sass

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
$loader-mask--size: 100px
2+
$loader-mask--color: #666
3+
$loader-mask--color-mask: #f1c40f
4+
5+
.loader-text
6+
7+
&:before,
8+
&:after
9+
position: fixed
10+
width: 100%
11+
top: 50%
12+
margin-top: - $loader-mask--size / 2
13+
font-size: $loader-mask--size
14+
content: 'Loading'
15+
text-align: center
16+
font-family: $font-loader
17+
overflow: hidden
18+
line-height: 1.2
19+
animation: maskBottom 2s linear infinite alternate both
20+
21+
&:before
22+
color: $loader-mask--color
23+
24+
&:after
25+
color: $loader-mask--color-mask
26+
height: 0
27+
animation: mask 1s linear infinite alternate
28+
29+
@keyframes maskBottom
30+
0%
31+
color: #2ecc71
32+
33+
50%
34+
color: #2ecc71
35+
36+
51%
37+
color: #3498db
38+
39+
100%
40+
color: #3498db
41+
42+
@keyframes mask
43+
0%
44+
height: 0
45+
46+
100%
47+
height: $loader-mask--size * 1.2

0 commit comments

Comments
 (0)