| 
| 
| 
| 
| 
-|:---:|:---:|:---:|:---:|:---:|:---:|
-| 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..f36e7c4
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,199 @@
+*,
+*: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;
+ width: 25%;
+ margin: 10px 10px 10px 0;
+}
+
+.box--full {
+ width: 100%;
+ margin-right: 0;
+}
+
+.box__item {
+ display: inline-block;
+ margin: 4px 0;
+}
+
+.box__title {
+ font-size: 18px;
+ color: #666;
+ margin-bottom: 15px;
+}
+
+/* Buttons */
+.button {
+ 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;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..48a22cd
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,173 @@
+(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: 'half' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-blink'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: 'blink' },
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-default-inverse'),
+ className: 'loader-default',
+ attributes: [
+ { attribute: '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: 'rounded' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-text'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: 'data-text' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-bar-blink'),
+ className: 'loader-bar',
+ attributes: [
+ { attribute: '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-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: 'blink' }
+ ]
+ },
+ {
+ button: document.getElementById('loader-ball'),
+ className: 'loader-ball'
+ }
+ ];
+
+ 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);
+ }
+
+})();
\ No newline at end of file
diff --git a/css-loader-share.png b/css-loader-share.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e2a6154eb406b8c6a9f7e55d0da1edaa0bd6ee2
GIT binary patch
literal 18857
zcmce-Wn3KJ(k_}1CrE+@ceen8TX1)G9~c}4*FbQ08Qk67gX`d~!QCauz+C?Oy!$=p
z+;jK+-A{MEbl2*tr)t%z?$!OQH6aRe;>d`&h_7C~LY9;eQF`?X0s89IYwnM4URst;
zGoxM(IF6zkj>@(`M;Ai}(^rBfwnnDJlGcW1rb?!UCT{jaro69Sy`cuFXgF%f%5WRo
zS~D8{qr>QGZTDjR>J_hmtDT{-rKuyak*OKThL7~DwUd+>WWq
-
-
-
\ No newline at end of file
diff --git a/examples/loader-ball.html b/examples/loader-ball.html
deleted file mode 100644
index f661bfa..0000000
--- a/examples/loader-ball.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
- Lorem ipsum dolor sit amet.
-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. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
Lorem ipsum dolor sit amet.
-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.
-
-
-
-
\ No newline at end of file
diff --git a/examples/loader-bar.html b/examples/loader-bar.html
deleted file mode 100644
index ed0f6bc..0000000
--- a/examples/loader-bar.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
- Lorem ipsum dolor sit amet.
-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. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
Lorem ipsum dolor sit amet.
-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.
-
-
-
-
\ No newline at end of file
diff --git a/examples/loader-border.html b/examples/loader-border.html
deleted file mode 100644
index 9784dbd..0000000
--- a/examples/loader-border.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
- Lorem ipsum dolor sit amet.
-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. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
Lorem ipsum dolor sit amet.
-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.
-
-
-
-
\ No newline at end of file
diff --git a/examples/loader-double.html b/examples/loader-double.html
deleted file mode 100644
index 0cfa33c..0000000
--- a/examples/loader-double.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
- Lorem ipsum dolor sit amet.
-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. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
Lorem ipsum dolor sit amet.
-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.
-
-
-
-
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..b62e283ec1d80835b817123e29eb71d40ffed7af
GIT binary patch
literal 32988
zcmeI4$#&FM5Qdd=*ks2hcDIuS%PjKLorem ipsum dolor sit amet.
-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. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
- Lorem ipsum dolor sit. -
Lorem ipsum dolor sit amet.
-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.
-
+
+ CSS Loader
+Simple loaders for your web applications using only one div and pure CSS ♥.
+
+
+
+
+
+ Why?
+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 in GitHub.
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index a082456..18d28a4 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,28 @@
{
- "name": "css-loader",
+ "name": "css-loader-page",
"version": "1.0.0",
"repository": "raphaelfabeni/css-loader",
"description": "Simple loaders for your web applications using only one div and pure CSS ♥.",
- "main": "index.js",
+ "main": "index.html",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "server": "browser-sync start --server",
+ "build:css": "cleancss -o ./dist/main.min.css ./assets/css/main.css",
+ "build:js": "uglifyjs ./assets/js/main.js > ./dist/main.min.js",
+ "build": "npm run build:css && npm run build:js",
+ "watch:css": "watchy -w ./assets/css/main.css -- npm run build:css",
+ "watch:js": "watchy -w ./assets/js/main.js -- npm run build:js",
+ "reload:dist": "watchy -w ./dist -- browser-sync reload",
+ "reload:index": "watchy -w ./index.html -- browser-sync reload",
+ "reload:all": "npm run watch:css & npm run watch:js & npm run reload:dist & npm run reload:index",
+ "start": "npm run build && npm run reload:all & npm run server"
},
"author": "Raphael Fabeni",
"license": "MIT",
"dependencies": {
- "browser-sync": "^2.16.0",
- "gulp": "^3.9.1",
- "gulp-notify": "^2.2.0",
- "gulp-sass": "^2.3.2",
- "gulp-sass-lint": "^1.2.0",
- "gulp-sourcemaps": "^1.6.0",
- "gulp-util": "^3.0.7"
+ "browser-sync": "^2.17.3",
+ "clean-css": "^3.4.20",
+ "uglify-js": "^2.7.3",
+ "watchy": "^0.6.6"
}
}
diff --git a/src/css-loader.sass b/src/css-loader.sass
deleted file mode 100644
index 50b6437..0000000
--- a/src/css-loader.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-@import './general/base'
-@import './general/animations'
-@import './general/utils'
-
-@import './loaders/loader'
-@import './loaders/loader-double'
-@import './loaders/loader-bar'
-@import './loaders/loader-border'
-@import './loaders/loader-ball'
\ No newline at end of file
diff --git a/src/general/_animations.sass b/src/general/_animations.sass
deleted file mode 100644
index d2a3ba5..0000000
--- a/src/general/_animations.sass
+++ /dev/null
@@ -1,16 +0,0 @@
-// General animations
-// ==========================================================================
-
-@keyframes rotation
- from
- transform: rotate(0)
-
- to
- transform: rotate(359deg)
-
-@keyframes blink
- from
- opacity: .5
-
- to
- opacity: 1
\ No newline at end of file
diff --git a/src/general/_base.sass b/src/general/_base.sass
deleted file mode 100644
index 335c885..0000000
--- a/src/general/_base.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-.loader
- color: #fff
- position: fixed
- box-sizing: border-box
- left: -9999px
- top: -9999px
- width: 0
- height: 0
- overflow: hidden
- z-index: 999999
-
- &:after,
- &:before
- box-sizing: border-box
-
- &.is-active
- background-color: rgba(0, 0, 0, .85)
- width: 100%
- height: 100%
- left: 0
- top: 0
\ No newline at end of file
diff --git a/src/general/_utils.sass b/src/general/_utils.sass
deleted file mode 100644
index f2e078f..0000000
--- a/src/general/_utils.sass
+++ /dev/null
@@ -1,30 +0,0 @@
-// Data text
-// ==========================================================================
-.loader
-
- &[data-text]
-
- &:before
- position: fixed
- left: 0
- top: 50%
- color: currentColor
- font-family: Helvetica, Arial, sans-serif
- text-align: center
- width: 100%
-
- // Default text
- &[data-text = '']
- &:before
- content: 'Loading'
-
- // Passing text as attribute
- &:not([data-text = ''])
- &:before
- content: attr(data-text)
-
- // Blink animation
- // ==========================================================================
- &[blink]
- &:before
- animation: blink 1s linear infinite alternate
\ No newline at end of file
diff --git a/src/loaders/_loader-ball.sass b/src/loaders/_loader-ball.sass
deleted file mode 100644
index 7591d9f..0000000
--- a/src/loaders/_loader-ball.sass
+++ /dev/null
@@ -1,51 +0,0 @@
-// Loader ball
-// ==========================================================================
-.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
-
- &:after
- content: ''
- position: absolute
- background-color: rgba(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: rgba(0,0,0,0)
- transform: scale(0)
-
- 95%,
- 100%
- background-color: rgba(0,0,0, .75)
- transform: scale(1)
-
-@keyframes kick
- 0%
- transform: translateY(-80px) scaleX(.95)
-
- 90%
- border-radius: 50%
-
- 100%
- transform: translateY(0) scaleX(1)
- border-radius: 50% 50% 35% 35%
diff --git a/src/loaders/_loader-bar.sass b/src/loaders/_loader-bar.sass
deleted file mode 100644
index 26c346b..0000000
--- a/src/loaders/_loader-bar.sass
+++ /dev/null
@@ -1,38 +0,0 @@
-// Loader bar
-// ==========================================================================
-
-$loader-bar--color: #52b3d9
-$loader-bar--color-secondary: #4183d7
-$loader-bar--text-color: #fff
-
-.loader-bar
-
- // Before is used for data-text attribute
- &[data-text]:before
- top: calc(50% - 40px)
-
- &:after
- content: ''
- position: fixed
- top: 50%
- left: 50%
- width: 200px
- height: 20px
- transform: translate(-50%, -50%)
- background: linear-gradient( -45deg, $loader-bar--color-secondary 25%, $loader-bar--color 25%, $loader-bar--color 50%, $loader-bar--color-secondary 50%, $loader-bar--color-secondary 75%, $loader-bar--color 75%, $loader-bar--color)
- background-size: 20px 20px
- box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2), 0 0 0 5px rgba(0, 0, 0, .2)
- animation: moveBar 1.5s linear infinite
-
- // Rounded version
- &[rounded]
- &:after
- border-radius: 15px
-
-// Animation for bars
-@keyframes moveBar
- from
- background-position: 0 0
-
- to
- background-position: 20px 20px
\ No newline at end of file
diff --git a/src/loaders/_loader-border.sass b/src/loaders/_loader-border.sass
deleted file mode 100644
index a3f808f..0000000
--- a/src/loaders/_loader-border.sass
+++ /dev/null
@@ -1,49 +0,0 @@
-// Loader border
-// ==========================================================================
-
-$loader-border--width: 15px
-$loader-border--height: 15px
-
-// Corners animation
-@keyframes corners
- 6%
- width: $loader-border--width * 4
- height: $loader-border--height
-
- 25%
- width: $loader-border--width
- height: $loader-border--height
- left: calc(100% - #{$loader-border--width})
- top: 0
-
- 31%
- height: $loader-border--height * 4
-
- 50%
- height: $loader-border--height
- top: calc(100% - #{$loader-border--height})
- left: calc(100% - #{$loader-border--width})
-
- 56%
- width: $loader-border--width * 4
-
- 75%
- width: $loader-border--width
- left: 0
- top: calc(100% - #{$loader-border--height})
-
- 81%
- height: $loader-border--width * 4
-
-
-.loader-border
-
- &:after
- content: ''
- position: absolute
- top: 0
- left: 0
- width: $loader-border--width
- height: $loader-border--height
- background-color: #fff
- animation: corners 3s ease both infinite
diff --git a/src/loaders/_loader-double.sass b/src/loaders/_loader-double.sass
deleted file mode 100644
index 91e677a..0000000
--- a/src/loaders/_loader-double.sass
+++ /dev/null
@@ -1,36 +0,0 @@
-// Loader double
-// ==========================================================================
-
-// Config
-$loader-double--size: 48px
-$loader-double--border: 8px
-$loader-double--color: #fff
-$loader-double--color-external: #eb974e
-$loader-double--size-external: $loader-double--size + ($loader-double--border * 2)
-
-.loader-double
-
- &:after,
- &:before
- content: ''
- position: fixed
- border-radius: 50%
- border: solid $loader-double--border
- animation: rotation 1s linear infinite
-
- &:after
- width: $loader-double--size
- height: $loader-double--size
- border-color: $loader-double--color
- border-left-color: transparent
- top: calc(50% - #{$loader-double--size / 2})
- left: calc(50% - #{$loader-double--size / 2})
-
- &:before
- width: $loader-double--size-external
- height: $loader-double--size-external
- border-color: $loader-double--color-external
- border-right-color: transparent
- animation-duration: 2s
- top: calc(50% - #{($loader-double--size / 2) + $loader-double--border})
- left: calc(50% - #{($loader-double--size / 2) + $loader-double--border})
\ No newline at end of file
diff --git a/src/loaders/_loader.sass b/src/loaders/_loader.sass
deleted file mode 100644
index 2607174..0000000
--- a/src/loaders/_loader.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-// Loader (default)
-// ==========================================================================
-
-// Config
-$loader--size: 48px
-$loader--color: #fff
-$loader--text-color: #fff
-
-.loader-default
-
- // Before is used for data-text attribute
- &[data-text]:before
- top: calc(50% - #{($loader--size + 15)})
-
- &:after
- content: ''
- position: fixed
- width: $loader--size
- height: $loader--size
- border: solid 8px $loader--color
- border-left-color: transparent
- border-radius: 50%
- top: calc(50% - #{$loader--size / 2})
- left: calc(50% - #{$loader--size / 2})
- animation: rotation 1s linear infinite
-
- // Half
- &[half]
- &:after
- border-right-color: transparent
-
- // Inverse
- &[inverse]
- &:after
- animation-direction: reverse
From a0b324c4128923fc901ab2c449a881c38a94bab4 Mon Sep 17 00:00:00 2001
From: Raphael Fabeni
+
+
+
+
+
+ Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Border
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Double
+
+
+
+
+
+
+