loading_mask 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 101d3070a2b19a5453ddb38745441e549d649d08
4
+ data.tar.gz: a0b539d58354244d7bde7893e1337ace3ee7e4a0
5
+ SHA512:
6
+ metadata.gz: 2d39dabeb11bfb8fae68f85e9fad374f587e83ca38ebc592de487dec8bf11d6c0fa50dbdff358e73a84308c7a7ca4ae2e45951d1724d4849588db4e1772e5d3c
7
+ data.tar.gz: 8729fc2c56fff7bd89457dc799448472e88cdbe0725ab33140a1ccc49a46fcbe3ad8cdbca9b1e9f20d88a6b525aa7025f17f12aa581d3eec48bff75ef6cee48f
@@ -0,0 +1,3 @@
1
+ module LoadingMask
2
+ VERSION = '0.0.2'
3
+ end
@@ -0,0 +1,6 @@
1
+ require 'loading_mask/version'
2
+
3
+ module LoadingMask
4
+ class Engine < Rails::Engine
5
+ end
6
+ end
@@ -0,0 +1,13 @@
1
+ (function($) {
2
+ $.fn.lmask = function( action ) {
3
+ var cls = 'lmask';
4
+
5
+ $(this).toggleClass('lmask-relative', action === 'show');
6
+ if (action === 'show') {
7
+ if($(this).is('body') || $(this).is('html')){ cls += ' fixed' };
8
+ $('<div>', {class: cls}).appendTo($(this));
9
+ } else if (action === 'hide') {
10
+ $('.'+cls).remove();
11
+ }
12
+ };
13
+ }(jQuery));
@@ -0,0 +1,107 @@
1
+ .lmask-relative {
2
+ position: relative;
3
+ }
4
+
5
+ .lmask {
6
+ position: absolute;
7
+ height: 100%;
8
+ width: 100%;
9
+ background-color: #000;
10
+ bottom: 0;
11
+ left: 0;
12
+ right: 0;
13
+ top: 0;
14
+ z-index: 9999;;
15
+ opacity: 0.4;
16
+ }
17
+
18
+ .lmask.fixed {
19
+ position: fixed;
20
+ }
21
+
22
+ .lmask:before {
23
+ content: '';
24
+ background-color: rgba(0,0,0,0);
25
+ border: 5px solid rgba(0,183,229,0.9);
26
+ opacity: .9;
27
+ border-right: 5px solid rgba(0,0,0,0);
28
+ border-left: 5px solid rgba(0,0,0,0);
29
+ border-radius: 50px;
30
+ box-shadow: 0 0 35px #2187e7;
31
+ width: 50px;
32
+ height: 50px;
33
+ -moz-animation: spinPulse 1s infinite ease-in-out;
34
+ -webkit-animation: spinPulse 1s infinite linear;
35
+
36
+ margin: -25px 0 0 -25px;
37
+ position: absolute;
38
+ top: 50%;
39
+ left: 50%;
40
+ }
41
+
42
+ .lmask:after {
43
+ content: '';
44
+ background-color: rgba(0,0,0,0);
45
+ border: 5px solid rgba(0,183,229,0.9);
46
+ opacity: .9;
47
+ border-left: 5px solid rgba(0,0,0,0);
48
+ border-right: 5px solid rgba(0,0,0,0);
49
+ border-radius: 50px;
50
+ box-shadow: 0 0 15px #2187e7;
51
+ width: 30px;
52
+ height: 30px;
53
+ -moz-animation: spinoffPulse 1s infinite linear;
54
+ -webkit-animation: spinoffPulse 1s infinite linear;
55
+
56
+ margin: -15px 0 0 -15px;
57
+ position: absolute;
58
+ top: 50%;
59
+ left: 50%;
60
+ }
61
+
62
+ @-moz-keyframes spinPulse {
63
+ 0% {
64
+ -moz-transform:rotate(160deg);
65
+ opacity: 0;
66
+ box-shadow: 0 0 1px #2187e7;
67
+ }
68
+ 50% {
69
+ -moz-transform: rotate(145deg);
70
+ opacity: 1;
71
+ }
72
+ 100% {
73
+ -moz-transform: rotate(-320deg);
74
+ opacity: 0;
75
+ }
76
+ }
77
+ @-moz-keyframes spinoffPulse {
78
+ 0% {
79
+ -moz-transform: rotate(0deg);
80
+ }
81
+ 100% {
82
+ -moz-transform: rotate(360deg);
83
+ }
84
+ }
85
+ @-webkit-keyframes spinPulse {
86
+ 0% {
87
+ -webkit-transform: rotate(160deg);
88
+ opacity: 0;
89
+ box-shadow: 0 0 1px #2187e7;
90
+ }
91
+ 50% {
92
+ -webkit-transform: rotate(145deg);
93
+ opacity: 1;
94
+ }
95
+ 100% {
96
+ -webkit-transform: rotate(-320deg);
97
+ opacity: 0;
98
+ }
99
+ }
100
+ @-webkit-keyframes spinoffPulse {
101
+ 0% {
102
+ -webkit-transform: rotate(0deg);
103
+ }
104
+ 100% {
105
+ -webkit-transform: rotate(360deg);
106
+ }
107
+ }
@@ -0,0 +1,103 @@
1
+ .lmask-relative {
2
+ position: relative;
3
+ }
4
+ .lmask {
5
+ position: absolute;
6
+ height: 100%;
7
+ width: 100%;
8
+ background-color: #000;
9
+ bottom: 0;
10
+ left: 0;
11
+ right: 0;
12
+ top: 0;
13
+ z-index: 9999;;
14
+ opacity: 0.4;
15
+ &.fixed {
16
+ position: fixed;
17
+ }
18
+ &:before {
19
+ content: '';
20
+ background-color: rgba(0,0,0,0);
21
+ border: 5px solid rgba(0,183,229,0.9);
22
+ opacity: .9;
23
+ border-right: 5px solid rgba(0,0,0,0);
24
+ border-left: 5px solid rgba(0,0,0,0);
25
+ border-radius: 50px;
26
+ box-shadow: 0 0 35px #2187e7;
27
+ width: 50px;
28
+ height: 50px;
29
+ -moz-animation: spinPulse 1s infinite ease-in-out;
30
+ -webkit-animation: spinPulse 1s infinite linear;
31
+
32
+ margin: -25px 0 0 -25px;
33
+ position: absolute;
34
+ top: 50%;
35
+ left: 50%;
36
+ }
37
+ &:after {
38
+ content: '';
39
+ background-color: rgba(0,0,0,0);
40
+ border: 5px solid rgba(0,183,229,0.9);
41
+ opacity: .9;
42
+ border-left: 5px solid rgba(0,0,0,0);
43
+ border-right: 5px solid rgba(0,0,0,0);
44
+ border-radius: 50px;
45
+ box-shadow: 0 0 15px #2187e7;
46
+ width: 30px;
47
+ height: 30px;
48
+ -moz-animation: spinoffPulse 1s infinite linear;
49
+ -webkit-animation: spinoffPulse 1s infinite linear;
50
+
51
+ margin: -15px 0 0 -15px;
52
+ position: absolute;
53
+ top: 50%;
54
+ left: 50%;
55
+ }
56
+ }
57
+
58
+ @-moz-keyframes spinPulse {
59
+ 0% {
60
+ -moz-transform:rotate(160deg);
61
+ opacity: 0;
62
+ box-shadow: 0 0 1px #2187e7;
63
+ }
64
+ 50% {
65
+ -moz-transform: rotate(145deg);
66
+ opacity: 1;
67
+ }
68
+ 100% {
69
+ -moz-transform: rotate(-320deg);
70
+ opacity: 0;
71
+ }
72
+ }
73
+ @-moz-keyframes spinoffPulse {
74
+ 0% {
75
+ -moz-transform: rotate(0deg);
76
+ }
77
+ 100% {
78
+ -moz-transform: rotate(360deg);
79
+ }
80
+ }
81
+ @-webkit-keyframes spinPulse {
82
+ 0% {
83
+ -webkit-transform: rotate(160deg);
84
+ opacity: 0;
85
+ box-shadow: 0 0 1px #2187e7;
86
+ }
87
+ 50% {
88
+ -webkit-transform: rotate(145deg);
89
+ opacity: 1;
90
+ }
91
+ 100% {
92
+ -webkit-transform: rotate(-320deg);
93
+ opacity: 0;
94
+ }
95
+ }
96
+ @-webkit-keyframes spinoffPulse {
97
+ 0% {
98
+ -webkit-transform: rotate(0deg);
99
+ }
100
+ 100% {
101
+ -webkit-transform: rotate(360deg);
102
+ }
103
+ }
metadata ADDED
@@ -0,0 +1,77 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: loading_mask
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.2
5
+ platform: ruby
6
+ authors:
7
+ - Viktor Oleksyn
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-03-13 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.3'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.3'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ description: CSS loading mask for the Rails asset pipeline
42
+ email:
43
+ - bartezic@gmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - lib/loading_mask.rb
49
+ - lib/loading_mask/version.rb
50
+ - vendor/assets/javascripts/loading_mask.js
51
+ - vendor/assets/stylesheets/loading_mask.css
52
+ - vendor/assets/stylesheets/loading_mask_sass.scss
53
+ homepage: https://github.com/bartezic/loading_mask
54
+ licenses:
55
+ - MIT
56
+ metadata: {}
57
+ post_install_message:
58
+ rdoc_options: []
59
+ require_paths:
60
+ - lib
61
+ required_ruby_version: !ruby/object:Gem::Requirement
62
+ requirements:
63
+ - - ">="
64
+ - !ruby/object:Gem::Version
65
+ version: '0'
66
+ required_rubygems_version: !ruby/object:Gem::Requirement
67
+ requirements:
68
+ - - ">="
69
+ - !ruby/object:Gem::Version
70
+ version: '0'
71
+ requirements: []
72
+ rubyforge_project:
73
+ rubygems_version: 2.2.2
74
+ signing_key:
75
+ specification_version: 4
76
+ summary: CSS loading mask for the Rails asset pipeline.
77
+ test_files: []