├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── css ├── fallback.css ├── load1.css ├── load2.css ├── load3.css ├── load4.css ├── load5.css ├── load6.css ├── load7.css └── load8.css ├── images └── css-loaders-screenshot.jpg ├── less ├── fallback.less ├── load1.less ├── load2.less ├── load3.less ├── load4.less ├── load5.less ├── load6.less ├── load7.less └── load8.less ├── package.json └── sass ├── fallback.scss ├── load1.scss ├── load2.scss ├── load3.scss ├── load4.scss ├── load5.scss ├── load6.scss ├── load7.scss └── load8.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | css/main.css 3 | images/me.jpeg 4 | index.html 5 | jade/ 6 | script/ 7 | less/main.less 8 | .sass-cache 9 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Project configuration. 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | jade: { 7 | compile: { 8 | files: [{ 9 | expand: true, 10 | cwd: 'jade/', 11 | src: ['**/*.jade'], 12 | dest: '', 13 | ext: '.html' 14 | }] 15 | } 16 | }, 17 | less: { 18 | src: { 19 | expand: true, 20 | cwd: 'less/', 21 | src: ['**/*.less'], 22 | dest: 'css/', 23 | ext: '.css' 24 | } 25 | }, 26 | sass: { 27 | options: { 28 | sourcemap:'none' 29 | }, 30 | src: { 31 | expand: true, 32 | cwd: 'sass/', 33 | src: ['**/*.scss'], 34 | dest: 'css/', 35 | ext: '.css' 36 | } 37 | }, 38 | watch: { 39 | files: ['less/**/*.less','jade/**/*.jade'], 40 | tasks: ['default'] 41 | } 42 | }); 43 | 44 | grunt.loadNpmTasks('grunt-contrib-jade'); 45 | 46 | grunt.loadNpmTasks('grunt-contrib-less'); 47 | 48 | grunt.loadNpmTasks('grunt-contrib-sass'); 49 | 50 | grunt.loadNpmTasks('grunt-contrib-watch'); 51 | 52 | grunt.registerTask('default', ['less','jade','watch']); 53 | 54 | 55 | }; 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Luke Haas 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Single Element CSS Spinners](https://lukehaas.me/projects/css-loaders) 2 | 3 | This is a collection of loading spinners animated with CSS. 4 | 5 | Each spinner consists of a single `div` with a class of `loader` and content text of "Loading...". 6 | The text is for screen readers and can be used as a fallback state for older browsers. 7 | 8 | The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning. 9 | 10 | A strict limit of one element per loader (not including pseudo-elements) was placed on this project based on the belief that something as simple as a loader doesn't deserve more. 11 | 12 | Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size. 13 | 14 | ## Demo 15 | 16 | [![css-loaders-screenshot](https://raw.githubusercontent.com/lukehaas/css-loaders/step2/images/css-loaders-screenshot.jpg)](https://lukehaas.me/projects/css-loaders) 17 | 18 | > [Check it live](https://lukehaas.me/projects/css-loaders). 19 | 20 | ## Browser Support 21 | 22 | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png) 23 | --- | --- | --- | --- | --- | 24 | IE 10+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ | 25 | 26 | ## Contributing 27 | 28 | 1. Fork it! 29 | 2. Create your feature branch: `git checkout -b my-new-feature` 30 | 3. Commit your changes: `git commit -m 'Add some feature'` 31 | 4. Push to the branch: `git push origin my-new-feature` 32 | 5. Submit a pull request :) 33 | 34 | ## History 35 | 36 | For detailed changelog, check [Releases](https://github.com/lukehaas/css-loaders/releases). 37 | 38 | ## License 39 | 40 | [MIT License](https://github.com/lukehaas/css-loaders/blob/step2/LICENSE) 41 | 42 | Browser testing via [![lambda test](https://www.lambdatest.com/support/img/logo.svg)](https://www.lambdatest.com/) 43 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-loading-spinners", 3 | "version": "1.0.0", 4 | "homepage": "https://github.com/lukehaas/css-loaders", 5 | "authors": [ 6 | "Luke Haas " 7 | ], 8 | "description": "A collection of single element loading spinners, animated with CSS ", 9 | "main": "css", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "CSS", 15 | "spinner", 16 | "loader" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "node_modules", 22 | "bower_components", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /css/fallback.css: -------------------------------------------------------------------------------- 1 | /* Import this if you are using modernizr (recommended) 2 | It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers 3 | */ 4 | .no-cssanimations .load-container .loader { 5 | text-indent: 0; 6 | text-align: center; 7 | color: #FFF; 8 | font-size: 17px; 9 | background: none; 10 | border: 0 none; 11 | width: auto; 12 | height: auto; 13 | margin: 1em auto; 14 | overflow: visible; 15 | box-shadow: none; 16 | -webkit-animation: none; 17 | animation: none; 18 | } 19 | .no-cssanimations .load-container .loader:before, 20 | .no-cssanimations .load-container .loader:after { 21 | display: none; 22 | } 23 | -------------------------------------------------------------------------------- /css/load1.css: -------------------------------------------------------------------------------- 1 | .load1 .loader, 2 | .load1 .loader:before, 3 | .load1 .loader:after { 4 | background: #ffffff; 5 | -webkit-animation: load1 1s infinite ease-in-out; 6 | animation: load1 1s infinite ease-in-out; 7 | width: 1em; 8 | height: 4em; 9 | } 10 | .load1 .loader { 11 | color: #ffffff; 12 | text-indent: -9999em; 13 | margin: 88px auto; 14 | position: relative; 15 | font-size: 11px; 16 | -webkit-transform: translateZ(0); 17 | -ms-transform: translateZ(0); 18 | transform: translateZ(0); 19 | -webkit-animation-delay: -0.16s; 20 | animation-delay: -0.16s; 21 | } 22 | .load1 .loader:before, 23 | .load1 .loader:after { 24 | position: absolute; 25 | top: 0; 26 | content: ''; 27 | } 28 | .load1 .loader:before { 29 | left: -1.5em; 30 | -webkit-animation-delay: -0.32s; 31 | animation-delay: -0.32s; 32 | } 33 | .load1 .loader:after { 34 | left: 1.5em; 35 | } 36 | @-webkit-keyframes load1 { 37 | 0%, 38 | 80%, 39 | 100% { 40 | box-shadow: 0 0; 41 | height: 4em; 42 | } 43 | 40% { 44 | box-shadow: 0 -2em; 45 | height: 5em; 46 | } 47 | } 48 | @keyframes load1 { 49 | 0%, 50 | 80%, 51 | 100% { 52 | box-shadow: 0 0; 53 | height: 4em; 54 | } 55 | 40% { 56 | box-shadow: 0 -2em; 57 | height: 5em; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /css/load2.css: -------------------------------------------------------------------------------- 1 | .load2 .loader, 2 | .load2 .loader:before, 3 | .load2 .loader:after { 4 | border-radius: 50%; 5 | } 6 | .load2 .loader { 7 | color: #ffffff; 8 | font-size: 11px; 9 | text-indent: -99999em; 10 | margin: 55px auto; 11 | position: relative; 12 | width: 10em; 13 | height: 10em; 14 | box-shadow: inset 0 0 0 1em; 15 | -webkit-transform: translateZ(0); 16 | -ms-transform: translateZ(0); 17 | transform: translateZ(0); 18 | } 19 | .load2 .loader:before, 20 | .load2 .loader:after { 21 | position: absolute; 22 | content: ''; 23 | } 24 | .load2 .loader:before { 25 | width: 5.2em; 26 | height: 10.2em; 27 | background: #0dc5c1; 28 | border-radius: 10.2em 0 0 10.2em; 29 | top: -0.1em; 30 | left: -0.1em; 31 | -webkit-transform-origin: 5.1em 5.1em; 32 | transform-origin: 5.1em 5.1em; 33 | -webkit-animation: load2 2s infinite ease 1.5s; 34 | animation: load2 2s infinite ease 1.5s; 35 | } 36 | .load2 .loader:after { 37 | width: 5.2em; 38 | height: 10.2em; 39 | background: #0dc5c1; 40 | border-radius: 0 10.2em 10.2em 0; 41 | top: -0.1em; 42 | left: 4.9em; 43 | -webkit-transform-origin: 0.1em 5.1em; 44 | transform-origin: 0.1em 5.1em; 45 | -webkit-animation: load2 2s infinite ease; 46 | animation: load2 2s infinite ease; 47 | } 48 | @-webkit-keyframes load2 { 49 | 0% { 50 | -webkit-transform: rotate(0deg); 51 | transform: rotate(0deg); 52 | } 53 | 100% { 54 | -webkit-transform: rotate(360deg); 55 | transform: rotate(360deg); 56 | } 57 | } 58 | @keyframes load2 { 59 | 0% { 60 | -webkit-transform: rotate(0deg); 61 | transform: rotate(0deg); 62 | } 63 | 100% { 64 | -webkit-transform: rotate(360deg); 65 | transform: rotate(360deg); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /css/load3.css: -------------------------------------------------------------------------------- 1 | .load3 .loader { 2 | font-size: 10px; 3 | margin: 50px auto; 4 | text-indent: -9999em; 5 | width: 11em; 6 | height: 11em; 7 | border-radius: 50%; 8 | background: #ffffff; 9 | background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); 10 | background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); 11 | background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); 12 | background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); 13 | background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); 14 | position: relative; 15 | -webkit-animation: load3 1.4s infinite linear; 16 | animation: load3 1.4s infinite linear; 17 | -webkit-transform: translateZ(0); 18 | -ms-transform: translateZ(0); 19 | transform: translateZ(0); 20 | } 21 | .load3 .loader:before { 22 | width: 50%; 23 | height: 50%; 24 | background: #ffffff; 25 | border-radius: 100% 0 0 0; 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | content: ''; 30 | } 31 | .load3 .loader:after { 32 | background: #0dc5c1; 33 | width: 75%; 34 | height: 75%; 35 | border-radius: 50%; 36 | content: ''; 37 | margin: auto; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | bottom: 0; 42 | right: 0; 43 | } 44 | @-webkit-keyframes load3 { 45 | 0% { 46 | -webkit-transform: rotate(0deg); 47 | transform: rotate(0deg); 48 | } 49 | 100% { 50 | -webkit-transform: rotate(360deg); 51 | transform: rotate(360deg); 52 | } 53 | } 54 | @keyframes load3 { 55 | 0% { 56 | -webkit-transform: rotate(0deg); 57 | transform: rotate(0deg); 58 | } 59 | 100% { 60 | -webkit-transform: rotate(360deg); 61 | transform: rotate(360deg); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /css/load4.css: -------------------------------------------------------------------------------- 1 | .load4 .loader { 2 | color: #ffffff; 3 | font-size: 20px; 4 | margin: 100px auto; 5 | width: 1em; 6 | height: 1em; 7 | border-radius: 50%; 8 | position: relative; 9 | text-indent: -9999em; 10 | -webkit-animation: load4 1.3s infinite linear; 11 | animation: load4 1.3s infinite linear; 12 | -webkit-transform: translateZ(0); 13 | -ms-transform: translateZ(0); 14 | transform: translateZ(0); 15 | } 16 | @-webkit-keyframes load4 { 17 | 0%, 18 | 100% { 19 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; 20 | } 21 | 12.5% { 22 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 23 | } 24 | 25% { 25 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 26 | } 27 | 37.5% { 28 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; 29 | } 30 | 50% { 31 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; 32 | } 33 | 62.5% { 34 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; 35 | } 36 | 75% { 37 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; 38 | } 39 | 87.5% { 40 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; 41 | } 42 | } 43 | @keyframes load4 { 44 | 0%, 45 | 100% { 46 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; 47 | } 48 | 12.5% { 49 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 50 | } 51 | 25% { 52 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 53 | } 54 | 37.5% { 55 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; 56 | } 57 | 50% { 58 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; 59 | } 60 | 62.5% { 61 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; 62 | } 63 | 75% { 64 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; 65 | } 66 | 87.5% { 67 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /css/load5.css: -------------------------------------------------------------------------------- 1 | .load5 .loader { 2 | margin: 100px auto; 3 | font-size: 25px; 4 | width: 1em; 5 | height: 1em; 6 | border-radius: 50%; 7 | position: relative; 8 | text-indent: -9999em; 9 | -webkit-animation: load5 1.1s infinite ease; 10 | animation: load5 1.1s infinite ease; 11 | -webkit-transform: translateZ(0); 12 | -ms-transform: translateZ(0); 13 | transform: translateZ(0); 14 | } 15 | @-webkit-keyframes load5 { 16 | 0%, 17 | 100% { 18 | box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); 19 | } 20 | 12.5% { 21 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); 22 | } 23 | 25% { 24 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 25 | } 26 | 37.5% { 27 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 28 | } 29 | 50% { 30 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 31 | } 32 | 62.5% { 33 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 34 | } 35 | 75% { 36 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 37 | } 38 | 87.5% { 39 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; 40 | } 41 | } 42 | @keyframes load5 { 43 | 0%, 44 | 100% { 45 | box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); 46 | } 47 | 12.5% { 48 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); 49 | } 50 | 25% { 51 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 52 | } 53 | 37.5% { 54 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 55 | } 56 | 50% { 57 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 58 | } 59 | 62.5% { 60 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 61 | } 62 | 75% { 63 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); 64 | } 65 | 87.5% { 66 | box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /css/load6.css: -------------------------------------------------------------------------------- 1 | .load6 .loader { 2 | color: #ffffff; 3 | font-size: 90px; 4 | text-indent: -9999em; 5 | overflow: hidden; 6 | width: 1em; 7 | height: 1em; 8 | border-radius: 50%; 9 | margin: 72px auto; 10 | position: relative; 11 | -webkit-transform: translateZ(0); 12 | -ms-transform: translateZ(0); 13 | transform: translateZ(0); 14 | -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; 15 | animation: load6 1.7s infinite ease, round 1.7s infinite ease; 16 | } 17 | @-webkit-keyframes load6 { 18 | 0% { 19 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 20 | } 21 | 5%, 22 | 95% { 23 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 24 | } 25 | 10%, 26 | 59% { 27 | box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 28 | } 29 | 20% { 30 | box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 31 | } 32 | 38% { 33 | box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; 34 | } 35 | 100% { 36 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 37 | } 38 | } 39 | @keyframes load6 { 40 | 0% { 41 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 42 | } 43 | 5%, 44 | 95% { 45 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 46 | } 47 | 10%, 48 | 59% { 49 | box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 50 | } 51 | 20% { 52 | box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 53 | } 54 | 38% { 55 | box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; 56 | } 57 | 100% { 58 | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 59 | } 60 | } 61 | @-webkit-keyframes round { 62 | 0% { 63 | -webkit-transform: rotate(0deg); 64 | transform: rotate(0deg); 65 | } 66 | 100% { 67 | -webkit-transform: rotate(360deg); 68 | transform: rotate(360deg); 69 | } 70 | } 71 | @keyframes round { 72 | 0% { 73 | -webkit-transform: rotate(0deg); 74 | transform: rotate(0deg); 75 | } 76 | 100% { 77 | -webkit-transform: rotate(360deg); 78 | transform: rotate(360deg); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /css/load7.css: -------------------------------------------------------------------------------- 1 | .load7 .loader, 2 | .load7 .loader:before, 3 | .load7 .loader:after { 4 | border-radius: 50%; 5 | width: 2.5em; 6 | height: 2.5em; 7 | -webkit-animation-fill-mode: both; 8 | animation-fill-mode: both; 9 | -webkit-animation: load7 1.8s infinite ease-in-out; 10 | animation: load7 1.8s infinite ease-in-out; 11 | } 12 | .load7 .loader { 13 | color: #ffffff; 14 | font-size: 10px; 15 | margin: 80px auto; 16 | position: relative; 17 | text-indent: -9999em; 18 | -webkit-transform: translateZ(0); 19 | -ms-transform: translateZ(0); 20 | transform: translateZ(0); 21 | -webkit-animation-delay: -0.16s; 22 | animation-delay: -0.16s; 23 | } 24 | .load7 .loader:before, 25 | .load7 .loader:after { 26 | content: ''; 27 | position: absolute; 28 | top: 0; 29 | } 30 | .load7 .loader:before { 31 | left: -3.5em; 32 | -webkit-animation-delay: -0.32s; 33 | animation-delay: -0.32s; 34 | } 35 | .load7 .loader:after { 36 | left: 3.5em; 37 | } 38 | @-webkit-keyframes load7 { 39 | 0%, 40 | 80%, 41 | 100% { 42 | box-shadow: 0 2.5em 0 -1.3em; 43 | } 44 | 40% { 45 | box-shadow: 0 2.5em 0 0; 46 | } 47 | } 48 | @keyframes load7 { 49 | 0%, 50 | 80%, 51 | 100% { 52 | box-shadow: 0 2.5em 0 -1.3em; 53 | } 54 | 40% { 55 | box-shadow: 0 2.5em 0 0; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /css/load8.css: -------------------------------------------------------------------------------- 1 | .load8 .loader, 2 | .load8 .loader:after { 3 | border-radius: 50%; 4 | width: 10em; 5 | height: 10em; 6 | } 7 | .load8 .loader { 8 | margin: 60px auto; 9 | font-size: 10px; 10 | position: relative; 11 | text-indent: -9999em; 12 | border-top: 1.1em solid rgba(255, 255, 255, 0.2); 13 | border-right: 1.1em solid rgba(255, 255, 255, 0.2); 14 | border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); 15 | border-left: 1.1em solid #ffffff; 16 | -webkit-transform: translateZ(0); 17 | -ms-transform: translateZ(0); 18 | transform: translateZ(0); 19 | -webkit-animation: load8 1.1s infinite linear; 20 | animation: load8 1.1s infinite linear; 21 | } 22 | @-webkit-keyframes load8 { 23 | 0% { 24 | -webkit-transform: rotate(0deg); 25 | transform: rotate(0deg); 26 | } 27 | 100% { 28 | -webkit-transform: rotate(360deg); 29 | transform: rotate(360deg); 30 | } 31 | } 32 | @keyframes load8 { 33 | 0% { 34 | -webkit-transform: rotate(0deg); 35 | transform: rotate(0deg); 36 | } 37 | 100% { 38 | -webkit-transform: rotate(360deg); 39 | transform: rotate(360deg); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /images/css-loaders-screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukehaas/css-loaders/c7fdf5ac73c71fec3142414adf8d592c7d2c6bf4/images/css-loaders-screenshot.jpg -------------------------------------------------------------------------------- /less/fallback.less: -------------------------------------------------------------------------------- 1 | /* Import this if you are using modernizr (recommended) 2 | It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers 3 | */ 4 | 5 | .no-cssanimations { 6 | 7 | .load-container { 8 | 9 | .loader { 10 | text-indent:0; 11 | text-align:center; 12 | color:#FFF; 13 | font-size:17px; 14 | background:none; 15 | border:0 none; 16 | width:auto; 17 | height:auto; 18 | margin:1em auto; 19 | overflow:visible; 20 | box-shadow:none; 21 | -webkit-animation:none; 22 | animation:none; 23 | 24 | &:before, 25 | &:after { 26 | display:none; 27 | } 28 | 29 | } 30 | 31 | } 32 | 33 | } 34 | 35 | -------------------------------------------------------------------------------- /less/load1.less: -------------------------------------------------------------------------------- 1 | @foreground: #FFF; 2 | 3 | .load1 { 4 | 5 | .loader, 6 | .loader:before, 7 | .loader:after { 8 | background:@foreground; 9 | -webkit-animation:load1 1s infinite ease-in-out; 10 | animation:load1 1s infinite ease-in-out; 11 | width:1em; 12 | height:4em; 13 | } 14 | 15 | .loader { 16 | color:@foreground; 17 | text-indent:-9999em; 18 | margin:88px auto; 19 | position:relative; 20 | font-size:11px; 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-animation-delay:-0.16s; 25 | animation-delay:-0.16s; 26 | 27 | &:before, 28 | &:after { 29 | position:absolute; 30 | top:0; 31 | content:''; 32 | } 33 | 34 | &:before { 35 | left:-1.5em; 36 | -webkit-animation-delay:-0.32s; 37 | animation-delay:-0.32s; 38 | } 39 | 40 | &:after { 41 | left:1.5em; 42 | } 43 | 44 | } 45 | 46 | } 47 | 48 | 49 | @-webkit-keyframes load1 {.load1-frames;} 50 | @keyframes load1 {.load1-frames;} 51 | 52 | .load1-frames() { 53 | 54 | 0%, 55 | 80%, 56 | 100% { 57 | box-shadow:0 0; 58 | height:4em; 59 | } 60 | 61 | 40% { 62 | box-shadow:0 -2em; 63 | height:5em; 64 | } 65 | 66 | } 67 | -------------------------------------------------------------------------------- /less/load2.less: -------------------------------------------------------------------------------- 1 | @background: hsl(179,88%,41%); 2 | @foreground: #FFF; 3 | 4 | .load2 { 5 | 6 | .loader, 7 | .loader:before, 8 | .loader:after { 9 | border-radius:50%; 10 | } 11 | 12 | .loader { 13 | color:@foreground; 14 | font-size:11px; 15 | text-indent:-99999em; 16 | margin:55px auto; 17 | position:relative; 18 | width:10em; 19 | height:10em; 20 | box-shadow: inset 0 0 0 1em; 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | 25 | &:before, 26 | &:after { 27 | position:absolute; 28 | content:''; 29 | } 30 | 31 | &:before { 32 | width:5.2em; 33 | height:10.2em; 34 | background: @background; 35 | border-radius: 10.2em 0 0 10.2em; 36 | top:-0.1em; 37 | left:-0.1em; 38 | -webkit-transform-origin:5.1em 5.1em; 39 | transform-origin:5.1em 5.1em; 40 | -webkit-animation:load2 2s infinite ease 1.5s; 41 | animation:load2 2s infinite ease 1.5s; 42 | } 43 | 44 | &:after { 45 | width:5.2em; 46 | height:10.2em; 47 | background: @background; 48 | border-radius: 0 10.2em 10.2em 0; 49 | top:-0.1em; 50 | left:4.9em; 51 | -webkit-transform-origin:0.1em 5.1em; 52 | transform-origin:0.1em 5.1em; 53 | -webkit-animation:load2 2s infinite ease; 54 | animation:load2 2s infinite ease; 55 | } 56 | 57 | } 58 | 59 | } 60 | 61 | @-webkit-keyframes load2 {.load2-frames;} 62 | @keyframes load2 {.load2-frames;} 63 | 64 | .load2-frames() { 65 | 66 | 0% { 67 | -webkit-transform:rotate(0deg); 68 | transform:rotate(0deg); 69 | } 70 | 71 | 100% { 72 | -webkit-transform:rotate(360deg); 73 | transform:rotate(360deg); 74 | } 75 | 76 | } 77 | -------------------------------------------------------------------------------- /less/load3.less: -------------------------------------------------------------------------------- 1 | @background: hsl(179,88%,41%); 2 | @foreground: #FFF; 3 | 4 | .load3 { 5 | 6 | .loader { 7 | font-size:10px; 8 | margin:50px auto; 9 | text-indent:-9999em; 10 | width:11em; 11 | height:11em; 12 | border-radius:50%; 13 | background: @foreground; 14 | background: -moz-linear-gradient(left, fade(@foreground,100%) 10%, fade(@foreground,0%) 42%); 15 | background: -webkit-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); 16 | background: -o-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); 17 | background: -ms-linear-gradient(left, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); 18 | background: linear-gradient(to right, fade(@foreground,100%) 10%,fade(@foreground,0%) 42%); 19 | position: relative; 20 | -webkit-animation:load3 1.4s infinite linear; 21 | animation:load3 1.4s infinite linear; 22 | -webkit-transform: translateZ(0); 23 | -ms-transform: translateZ(0); 24 | transform: translateZ(0); 25 | 26 | &:before { 27 | width:50%; 28 | height:50%; 29 | background: @foreground; 30 | border-radius: 100% 0 0 0; 31 | position:absolute; 32 | top:0; 33 | left:0; 34 | content:''; 35 | } 36 | 37 | &:after { 38 | background:@background; 39 | width:75%; 40 | height:75%; 41 | border-radius:50%; 42 | content:''; 43 | margin:auto; 44 | position: absolute; 45 | top: 0; left: 0; bottom: 0; right: 0; 46 | } 47 | 48 | } 49 | 50 | } 51 | 52 | @-webkit-keyframes load3 {.load3-frames;} 53 | @keyframes load3 {.load3-frames;} 54 | 55 | .load3-frames() { 56 | 57 | 0% { 58 | -webkit-transform:rotate(0deg); 59 | transform:rotate(0deg); 60 | } 61 | 62 | 100% { 63 | -webkit-transform:rotate(360deg); 64 | transform:rotate(360deg); 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /less/load4.less: -------------------------------------------------------------------------------- 1 | @foreground: #FFF; 2 | 3 | .load4 { 4 | 5 | .loader { 6 | color:@foreground; 7 | font-size:20px; 8 | margin:100px auto; 9 | width:1em; 10 | height:1em; 11 | border-radius:50%; 12 | position:relative; 13 | text-indent:-9999em; 14 | -webkit-animation:load4 1.3s infinite linear; 15 | animation:load4 1.3s infinite linear; 16 | -webkit-transform: translateZ(0); 17 | -ms-transform: translateZ(0); 18 | transform: translateZ(0); 19 | } 20 | 21 | } 22 | @-webkit-keyframes load4 {.load4-frames;} 23 | @keyframes load4 {.load4-frames;} 24 | 25 | .load4-frames() { 26 | 27 | 0%, 28 | 100% { 29 | box-shadow:0 -3em 0 0.2em, 30 | 2em -2em 0 0em, 31 | 3em 0 0 -1em, 32 | 2em 2em 0 -1em, 33 | 0 3em 0 -1em, 34 | -2em 2em 0 -1em, 35 | -3em 0 0 -1em, 36 | -2em -2em 0 0; 37 | } 38 | 39 | 12.5% { 40 | box-shadow:0 -3em 0 0, 41 | 2em -2em 0 0.2em, 42 | 3em 0 0 0, 43 | 2em 2em 0 -1em, 44 | 0 3em 0 -1em, 45 | -2em 2em 0 -1em, 46 | -3em 0 0 -1em, 47 | -2em -2em 0 -1em; 48 | } 49 | 50 | 25% { 51 | box-shadow:0 -3em 0 -0.5em, 52 | 2em -2em 0 0, 53 | 3em 0 0 0.2em, 54 | 2em 2em 0 0, 55 | 0 3em 0 -1em, 56 | -2em 2em 0 -1em, 57 | -3em 0 0 -1em, 58 | -2em -2em 0 -1em; 59 | } 60 | 61 | 37.5% { 62 | box-shadow:0 -3em 0 -1em, 63 | 2em -2em 0 -1em, 64 | 3em 0em 0 0, 65 | 2em 2em 0 0.2em, 66 | 0 3em 0 0em, 67 | -2em 2em 0 -1em, 68 | -3em 0em 0 -1em, 69 | -2em -2em 0 -1em; 70 | } 71 | 72 | 50% { 73 | box-shadow:0 -3em 0 -1em, 74 | 2em -2em 0 -1em, 75 | 3em 0 0 -1em, 76 | 2em 2em 0 0em, 77 | 0 3em 0 0.2em, 78 | -2em 2em 0 0, 79 | -3em 0em 0 -1em, 80 | -2em -2em 0 -1em; 81 | } 82 | 83 | 62.5% { 84 | box-shadow:0 -3em 0 -1em, 85 | 2em -2em 0 -1em, 86 | 3em 0 0 -1em, 87 | 2em 2em 0 -1em, 88 | 0 3em 0 0, 89 | -2em 2em 0 0.2em, 90 | -3em 0 0 0, 91 | -2em -2em 0 -1em; 92 | } 93 | 94 | 75% { 95 | box-shadow:0em -3em 0 -1em, 96 | 2em -2em 0 -1em, 97 | 3em 0em 0 -1em, 98 | 2em 2em 0 -1em, 99 | 0 3em 0 -1em, 100 | -2em 2em 0 0, 101 | -3em 0em 0 0.2em, 102 | -2em -2em 0 0; 103 | } 104 | 105 | 87.5% { 106 | box-shadow:0em -3em 0 0, 107 | 2em -2em 0 -1em, 108 | 3em 0 0 -1em, 109 | 2em 2em 0 -1em, 110 | 0 3em 0 -1em, 111 | -2em 2em 0 0, 112 | -3em 0em 0 0, 113 | -2em -2em 0 0.2em; 114 | } 115 | 116 | } 117 | -------------------------------------------------------------------------------- /less/load5.less: -------------------------------------------------------------------------------- 1 | @foreground: #fff; 2 | 3 | .load5 { 4 | 5 | .loader { 6 | margin:100px auto; 7 | font-size:25px; 8 | width:1em; 9 | height:1em; 10 | border-radius:50%; 11 | position:relative; 12 | text-indent:-9999em; 13 | -webkit-animation:load5 1.1s infinite ease; 14 | animation:load5 1.1s infinite ease; 15 | -webkit-transform: translateZ(0); 16 | -ms-transform: translateZ(0); 17 | transform: translateZ(0); 18 | } 19 | 20 | } 21 | @-webkit-keyframes load5 {.load5-frames;} 22 | @keyframes load5 {.load5-frames;} 23 | 24 | .load5-frames() { 25 | 26 | 0%, 27 | 100% { 28 | box-shadow:0em -2.6em 0em 0em fade(@foreground,100%), 29 | 1.8em -1.8em 0 0em fade(@foreground,20%), 30 | 2.5em 0em 0 0em fade(@foreground,20%), 31 | 1.75em 1.75em 0 0em fade(@foreground,20%), 32 | 0em 2.5em 0 0em fade(@foreground,20%), 33 | -1.8em 1.8em 0 0em fade(@foreground,20%), 34 | -2.6em 0em 0 0em fade(@foreground,50%), 35 | -1.8em -1.8em 0 0em fade(@foreground,70%); 36 | } 37 | 38 | 12.5% { 39 | box-shadow:0em -2.6em 0em 0em fade(@foreground,70%), 40 | 1.8em -1.8em 0 0em fade(@foreground,100%), 41 | 2.5em 0em 0 0em fade(@foreground,20%), 42 | 1.75em 1.75em 0 0em fade(@foreground,20%), 43 | 0em 2.5em 0 0em fade(@foreground,20%), 44 | -1.8em 1.8em 0 0em fade(@foreground,20%), 45 | -2.6em 0em 0 0em fade(@foreground,20%), 46 | -1.8em -1.8em 0 0em fade(@foreground,50%); 47 | } 48 | 49 | 25% { 50 | box-shadow:0em -2.6em 0em 0em fade(@foreground,50%), 51 | 1.8em -1.8em 0 0em fade(@foreground,70%), 52 | 2.5em 0em 0 0em fade(@foreground,100%), 53 | 1.75em 1.75em 0 0em fade(@foreground,20%), 54 | 0em 2.5em 0 0em fade(@foreground,20%), 55 | -1.8em 1.8em 0 0em fade(@foreground,20%), 56 | -2.6em 0em 0 0em fade(@foreground,20%), 57 | -1.8em -1.8em 0 0em fade(@foreground,20%); 58 | } 59 | 60 | 37.5% { 61 | box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 62 | 1.8em -1.8em 0 0em fade(@foreground,50%), 63 | 2.5em 0em 0 0em fade(@foreground,70%), 64 | 1.75em 1.75em 0 0em fade(@foreground,100%), 65 | 0em 2.5em 0 0em fade(@foreground,20%), 66 | -1.8em 1.8em 0 0em fade(@foreground,20%), 67 | -2.6em 0em 0 0em fade(@foreground,20%), 68 | -1.8em -1.8em 0 0em fade(@foreground,20%); 69 | } 70 | 71 | 50% { 72 | box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 73 | 1.8em -1.8em 0 0em fade(@foreground,20%), 74 | 2.5em 0em 0 0em fade(@foreground,50%), 75 | 1.75em 1.75em 0 0em fade(@foreground,70%), 76 | 0em 2.5em 0 0em fade(@foreground,100%), 77 | -1.8em 1.8em 0 0em fade(@foreground,20%), 78 | -2.6em 0em 0 0em fade(@foreground,20%), 79 | -1.8em -1.8em 0 0em fade(@foreground,20%); 80 | } 81 | 82 | 62.5% { 83 | box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 84 | 1.8em -1.8em 0 0em fade(@foreground,20%), 85 | 2.5em 0em 0 0em fade(@foreground,20%), 86 | 1.75em 1.75em 0 0em fade(@foreground,50%), 87 | 0em 2.5em 0 0em fade(@foreground,70%), 88 | -1.8em 1.8em 0 0em fade(@foreground,100%), 89 | -2.6em 0em 0 0em fade(@foreground,20%), 90 | -1.8em -1.8em 0 0em fade(@foreground,20%); 91 | } 92 | 93 | 75% { 94 | box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 95 | 1.8em -1.8em 0 0em fade(@foreground,20%), 96 | 2.5em 0em 0 0em fade(@foreground,20%), 97 | 1.75em 1.75em 0 0em fade(@foreground,20%), 98 | 0em 2.5em 0 0em fade(@foreground,50%), 99 | -1.8em 1.8em 0 0em fade(@foreground,70%), 100 | -2.6em 0em 0 0em fade(@foreground,100%), 101 | -1.8em -1.8em 0 0em fade(@foreground,20%); 102 | } 103 | 104 | 87.5% { 105 | box-shadow:0em -2.6em 0em 0em fade(@foreground,20%), 106 | 1.8em -1.8em 0 0em fade(@foreground,20%), 107 | 2.5em 0em 0 0em fade(@foreground,20%), 108 | 1.75em 1.75em 0 0em fade(@foreground,20%), 109 | 0em 2.5em 0 0em fade(@foreground,20%), 110 | -1.8em 1.8em 0 0em fade(@foreground,50%), 111 | -2.6em 0em 0 0em fade(@foreground,70%), 112 | -1.8em -1.8em 0 0em fade(@foreground,100%); 113 | } 114 | 115 | } 116 | -------------------------------------------------------------------------------- /less/load6.less: -------------------------------------------------------------------------------- 1 | @foreground: #fff; 2 | 3 | .load6 { 4 | 5 | .loader { 6 | color:@foreground; 7 | font-size:90px; 8 | text-indent:-9999em; 9 | overflow: hidden; 10 | width:1em; 11 | height:1em; 12 | border-radius:50%; 13 | margin:72px auto; 14 | position:relative; 15 | -webkit-transform: translateZ(0); 16 | -ms-transform: translateZ(0); 17 | transform: translateZ(0); 18 | -webkit-animation:load6 1.7s infinite ease, round 1.7s infinite ease; 19 | animation:load6 1.7s infinite ease, round 1.7s infinite ease;; 20 | } 21 | 22 | } 23 | @-webkit-keyframes load6 {.load6-frames;} 24 | @keyframes load6 {.load6-frames;} 25 | 26 | @-webkit-keyframes round {.round;} 27 | @keyframes round {.round;} 28 | 29 | .round() { 30 | 0% { 31 | -webkit-transform:rotate(0deg); 32 | transform:rotate(0deg); 33 | } 34 | 100% { 35 | -webkit-transform:rotate(360deg); 36 | transform:rotate(360deg); 37 | } 38 | } 39 | 40 | .load6-frames() { 41 | 0% { 42 | box-shadow: 43 | 0 -0.83em 0 -0.4em, 44 | 0 -0.83em 0 -0.42em, 45 | 0 -0.83em 0 -0.44em, 46 | 0 -0.83em 0 -0.46em, 47 | 0 -0.83em 0 -0.477em; 48 | } 49 | 5%, 50 | 95% { 51 | box-shadow: 52 | 0 -0.83em 0 -0.4em, 53 | 0 -0.83em 0 -0.42em, 54 | 0 -0.83em 0 -0.44em, 55 | 0 -0.83em 0 -0.46em, 56 | 0 -0.83em 0 -0.477em; 57 | } 58 | 59 | 10%, 60 | 59% { 61 | box-shadow: 62 | 0 -0.83em 0 -0.4em, 63 | -0.087em -0.825em 0 -0.42em, 64 | -0.173em -0.812em 0 -0.44em, 65 | -0.256em -0.789em 0 -0.46em, 66 | -0.297em -0.775em 0 -0.477em; 67 | } 68 | 69 | 20% { 70 | box-shadow: 71 | 0 -0.83em 0 -0.4em, 72 | -0.338em -0.758em 0 -0.42em, 73 | -0.555em -0.617em 0 -0.44em, 74 | -0.671em -0.488em 0 -0.46em, 75 | -0.749em -0.34em 0 -0.477em; 76 | } 77 | 78 | 38% { 79 | box-shadow: 80 | 0 -0.83em 0 -0.4em, 81 | -0.377em -0.74em 0 -0.42em, 82 | -0.645em -0.522em 0 -0.44em, 83 | -0.775em -0.297em 0 -0.46em, 84 | -0.82em -0.09em 0 -0.477em; 85 | } 86 | 100% { 87 | box-shadow: 88 | 0 -0.83em 0 -0.4em, 89 | 0 -0.83em 0 -0.42em, 90 | 0 -0.83em 0 -0.44em, 91 | 0 -0.83em 0 -0.46em, 92 | 0 -0.83em 0 -0.477em; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /less/load7.less: -------------------------------------------------------------------------------- 1 | @foreground: #fff; 2 | 3 | .load7 { 4 | 5 | .loader, 6 | .loader:before, 7 | .loader:after { 8 | border-radius:50%; 9 | width:2.5em; 10 | height:2.5em; 11 | -webkit-animation-fill-mode: both; 12 | animation-fill-mode: both; 13 | -webkit-animation:load7 1.8s infinite ease-in-out; 14 | animation:load7 1.8s infinite ease-in-out; 15 | } 16 | 17 | .loader { 18 | color:@foreground; 19 | font-size:10px; 20 | margin:80px auto; 21 | position:relative; 22 | text-indent:-9999em; 23 | -webkit-transform: translateZ(0); 24 | -ms-transform: translateZ(0); 25 | transform: translateZ(0); 26 | -webkit-animation-delay:-0.16s; 27 | animation-delay:-0.16s; 28 | 29 | &:before, 30 | &:after { 31 | content:''; 32 | position:absolute; 33 | top:0; 34 | } 35 | 36 | &:before { 37 | left:-3.5em; 38 | -webkit-animation-delay:-0.32s; 39 | animation-delay:-0.32s; 40 | } 41 | 42 | &:after { 43 | left:3.5em; 44 | } 45 | 46 | } 47 | 48 | } 49 | 50 | @-webkit-keyframes load7 {.load7-frames;} 51 | @keyframes load7 {.load7-frames;} 52 | 53 | .load7-frames() { 54 | 55 | 0%, 56 | 80%, 57 | 100% { 58 | box-shadow:0 2.5em 0 -1.3em; 59 | } 60 | 61 | 40% { 62 | box-shadow:0 2.5em 0 0; 63 | } 64 | 65 | } 66 | -------------------------------------------------------------------------------- /less/load8.less: -------------------------------------------------------------------------------- 1 | @foreground: #fff; 2 | 3 | .load8 { 4 | 5 | .loader, 6 | .loader:after { 7 | border-radius:50%; 8 | width:10em; 9 | height:10em; 10 | } 11 | 12 | .loader { 13 | margin:60px auto; 14 | font-size:10px; 15 | position:relative; 16 | text-indent:-9999em; 17 | border-top:1.1em solid fade(@foreground,20%); 18 | border-right:1.1em solid fade(@foreground,20%); 19 | border-bottom:1.1em solid fade(@foreground,20%); 20 | border-left:1.1em solid fade(@foreground,100%); 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-animation:load8 1.1s infinite linear; 25 | animation:load8 1.1s infinite linear; 26 | } 27 | 28 | } 29 | 30 | @-webkit-keyframes load8 {.load8-frames;} 31 | @keyframes load8 {.load8-frames;} 32 | 33 | .load8-frames() { 34 | 35 | 0% { 36 | -webkit-transform:rotate(0deg); 37 | transform:rotate(0deg); 38 | } 39 | 40 | 100% { 41 | -webkit-transform:rotate(360deg); 42 | transform:rotate(360deg); 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-loaders", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "Gruntfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Luke Haas", 10 | "license": "BSD", 11 | "devDependencies": { 12 | "grunt": "~0.4.4", 13 | "grunt-contrib-jade": "~0.11.0", 14 | "grunt-contrib-less": "^0.11.0", 15 | "grunt-contrib-sass": "^1.0.0", 16 | "grunt-contrib-watch": "^0.6.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /sass/fallback.scss: -------------------------------------------------------------------------------- 1 | /* Import this if you are using modernizr (recommended) 2 | It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers 3 | */ 4 | 5 | .no-cssanimations { 6 | 7 | .load-container { 8 | 9 | .loader { 10 | text-indent:0; 11 | text-align:center; 12 | color:#FFF; 13 | font-size:17px; 14 | background:none; 15 | border:0 none; 16 | width:auto; 17 | height:auto; 18 | margin:1em auto; 19 | overflow:visible; 20 | box-shadow:none; 21 | -webkit-animation:none; 22 | animation:none; 23 | 24 | &:before, 25 | &:after { 26 | display:none; 27 | } 28 | 29 | } 30 | 31 | } 32 | 33 | } 34 | 35 | -------------------------------------------------------------------------------- /sass/load1.scss: -------------------------------------------------------------------------------- 1 | $foreground: #FFF; 2 | 3 | .load1 { 4 | 5 | .loader, 6 | .loader:before, 7 | .loader:after { 8 | background:$foreground; 9 | -webkit-animation:load1 1s infinite ease-in-out; 10 | animation:load1 1s infinite ease-in-out; 11 | width:1em; 12 | height:4em; 13 | } 14 | 15 | .loader { 16 | color:$foreground; 17 | text-indent:-9999em; 18 | margin:88px auto; 19 | position:relative; 20 | font-size:11px; 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-animation-delay:-0.16s; 25 | animation-delay:-0.16s; 26 | 27 | &:before, 28 | &:after { 29 | position:absolute; 30 | top:0; 31 | content:''; 32 | } 33 | 34 | &:before { 35 | left:-1.5em; 36 | -webkit-animation-delay:-0.32s; 37 | animation-delay:-0.32s; 38 | } 39 | 40 | &:after { 41 | left:1.5em; 42 | } 43 | 44 | } 45 | 46 | } 47 | 48 | @mixin load1-frames { 49 | 0%, 50 | 80%, 51 | 100% { 52 | box-shadow:0 0; 53 | height:4em; 54 | } 55 | 56 | 40% { 57 | box-shadow:0 -2em; 58 | height:5em; 59 | } 60 | } 61 | 62 | @-webkit-keyframes load1 {@include load1-frames;} 63 | @keyframes load1 {@include load1-frames;} 64 | -------------------------------------------------------------------------------- /sass/load2.scss: -------------------------------------------------------------------------------- 1 | $background: hsl(179,88%,41%); 2 | $foreground: #FFF; 3 | 4 | .load2 { 5 | 6 | .loader, 7 | .loader:before, 8 | .loader:after { 9 | border-radius:50%; 10 | } 11 | 12 | .loader { 13 | color:$foreground; 14 | font-size:11px; 15 | text-indent:-99999em; 16 | margin:55px auto; 17 | position:relative; 18 | width:10em; 19 | height:10em; 20 | box-shadow: inset 0 0 0 1em; 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | 25 | &:before, 26 | &:after { 27 | position:absolute; 28 | content:''; 29 | } 30 | 31 | &:before { 32 | width:5.2em; 33 | height:10.2em; 34 | background: $background; 35 | border-radius: 10.2em 0 0 10.2em; 36 | top:-0.1em; 37 | left:-0.1em; 38 | -webkit-transform-origin:5.1em 5.1em; 39 | transform-origin:5.1em 5.1em; 40 | -webkit-animation:load2 2s infinite ease 1.5s; 41 | animation:load2 2s infinite ease 1.5s; 42 | } 43 | 44 | &:after { 45 | width:5.2em; 46 | height:10.2em; 47 | background: $background; 48 | border-radius: 0 10.2em 10.2em 0; 49 | top:-0.1em; 50 | left:4.9em; 51 | -webkit-transform-origin:0.1em 5.1em; 52 | transform-origin:0.1em 5.1em; 53 | -webkit-animation:load2 2s infinite ease; 54 | animation:load2 2s infinite ease; 55 | } 56 | 57 | } 58 | 59 | } 60 | 61 | @mixin load2-frames() { 62 | 63 | 0% { 64 | -webkit-transform:rotate(0deg); 65 | transform:rotate(0deg); 66 | } 67 | 68 | 100% { 69 | -webkit-transform:rotate(360deg); 70 | transform:rotate(360deg); 71 | } 72 | 73 | } 74 | 75 | @-webkit-keyframes load2 {@include load2-frames;} 76 | @keyframes load2 {@include load2-frames;} 77 | -------------------------------------------------------------------------------- /sass/load3.scss: -------------------------------------------------------------------------------- 1 | $background: hsl(179,88%,41%); 2 | $foreground: #FFF; 3 | 4 | .load3 { 5 | 6 | .loader { 7 | font-size:10px; 8 | margin:50px auto; 9 | text-indent:-9999em; 10 | width:11em; 11 | height:11em; 12 | border-radius:50%; 13 | background: $foreground; 14 | background: -moz-linear-gradient(left, rgba($foreground,1) 10%, rgba($foreground,0) 42%); 15 | background: -webkit-linear-gradient(left, rgba($foreground,1) 10%,rgba($foreground,0) 42%); 16 | background: -o-linear-gradient(left, rgba($foreground,1) 10%,rgba($foreground,0) 42%); 17 | background: -ms-linear-gradient(left, rgba($foreground,1) 10%,rgba($foreground,0) 42%); 18 | background: linear-gradient(to right, rgba($foreground,1) 10%,rgba($foreground,0) 42%); 19 | position: relative; 20 | -webkit-animation:load3 1.4s infinite linear; 21 | animation:load3 1.4s infinite linear; 22 | -webkit-transform: translateZ(0); 23 | -ms-transform: translateZ(0); 24 | transform: translateZ(0); 25 | 26 | &:before { 27 | width:50%; 28 | height:50%; 29 | background: $foreground; 30 | border-radius: 100% 0 0 0; 31 | position:absolute; 32 | top:0; 33 | left:0; 34 | content:''; 35 | } 36 | 37 | &:after { 38 | background:$background; 39 | width:75%; 40 | height:75%; 41 | border-radius:50%; 42 | content:''; 43 | margin:auto; 44 | position: absolute; 45 | top: 0; left: 0; bottom: 0; right: 0; 46 | } 47 | 48 | } 49 | 50 | } 51 | 52 | @mixin load3-frames() { 53 | 54 | 0% { 55 | -webkit-transform:rotate(0deg); 56 | transform:rotate(0deg); 57 | } 58 | 59 | 100% { 60 | -webkit-transform:rotate(360deg); 61 | transform:rotate(360deg); 62 | } 63 | 64 | } 65 | 66 | @-webkit-keyframes load3 {@include load3-frames;} 67 | @keyframes load3 {@include load3-frames;} 68 | -------------------------------------------------------------------------------- /sass/load4.scss: -------------------------------------------------------------------------------- 1 | $foreground: #FFF; 2 | 3 | .load4 { 4 | 5 | .loader { 6 | color:$foreground; 7 | font-size:20px; 8 | margin:100px auto; 9 | width:1em; 10 | height:1em; 11 | border-radius:50%; 12 | position:relative; 13 | text-indent:-9999em; 14 | -webkit-animation:load4 1.3s infinite linear; 15 | animation:load4 1.3s infinite linear; 16 | -webkit-transform: translateZ(0); 17 | -ms-transform: translateZ(0); 18 | transform: translateZ(0); 19 | } 20 | 21 | } 22 | 23 | @mixin load4-frames() { 24 | 25 | 0%, 26 | 100% { 27 | box-shadow:0 -3em 0 0.2em, 28 | 2em -2em 0 0em, 29 | 3em 0 0 -1em, 30 | 2em 2em 0 -1em, 31 | 0 3em 0 -1em, 32 | -2em 2em 0 -1em, 33 | -3em 0 0 -1em, 34 | -2em -2em 0 0; 35 | } 36 | 37 | 12.5% { 38 | box-shadow:0 -3em 0 0, 39 | 2em -2em 0 0.2em, 40 | 3em 0 0 0, 41 | 2em 2em 0 -1em, 42 | 0 3em 0 -1em, 43 | -2em 2em 0 -1em, 44 | -3em 0 0 -1em, 45 | -2em -2em 0 -1em; 46 | } 47 | 48 | 25% { 49 | box-shadow:0 -3em 0 -0.5em, 50 | 2em -2em 0 0, 51 | 3em 0 0 0.2em, 52 | 2em 2em 0 0, 53 | 0 3em 0 -1em, 54 | -2em 2em 0 -1em, 55 | -3em 0 0 -1em, 56 | -2em -2em 0 -1em; 57 | } 58 | 59 | 37.5% { 60 | box-shadow:0 -3em 0 -1em, 61 | 2em -2em 0 -1em, 62 | 3em 0em 0 0, 63 | 2em 2em 0 0.2em, 64 | 0 3em 0 0em, 65 | -2em 2em 0 -1em, 66 | -3em 0em 0 -1em, 67 | -2em -2em 0 -1em; 68 | } 69 | 70 | 50% { 71 | box-shadow:0 -3em 0 -1em, 72 | 2em -2em 0 -1em, 73 | 3em 0 0 -1em, 74 | 2em 2em 0 0em, 75 | 0 3em 0 0.2em, 76 | -2em 2em 0 0, 77 | -3em 0em 0 -1em, 78 | -2em -2em 0 -1em; 79 | } 80 | 81 | 62.5% { 82 | box-shadow:0 -3em 0 -1em, 83 | 2em -2em 0 -1em, 84 | 3em 0 0 -1em, 85 | 2em 2em 0 -1em, 86 | 0 3em 0 0, 87 | -2em 2em 0 0.2em, 88 | -3em 0 0 0, 89 | -2em -2em 0 -1em; 90 | } 91 | 92 | 75% { 93 | box-shadow:0em -3em 0 -1em, 94 | 2em -2em 0 -1em, 95 | 3em 0em 0 -1em, 96 | 2em 2em 0 -1em, 97 | 0 3em 0 -1em, 98 | -2em 2em 0 0, 99 | -3em 0em 0 0.2em, 100 | -2em -2em 0 0; 101 | } 102 | 103 | 87.5% { 104 | box-shadow:0em -3em 0 0, 105 | 2em -2em 0 -1em, 106 | 3em 0 0 -1em, 107 | 2em 2em 0 -1em, 108 | 0 3em 0 -1em, 109 | -2em 2em 0 0, 110 | -3em 0em 0 0, 111 | -2em -2em 0 0.2em; 112 | } 113 | 114 | } 115 | 116 | @-webkit-keyframes load4 {@include load4-frames;} 117 | @keyframes load4 {@include load4-frames;} 118 | -------------------------------------------------------------------------------- /sass/load5.scss: -------------------------------------------------------------------------------- 1 | $foreground: #fff; 2 | 3 | .load5 { 4 | 5 | .loader { 6 | margin:100px auto; 7 | font-size:25px; 8 | width:1em; 9 | height:1em; 10 | border-radius:50%; 11 | position:relative; 12 | text-indent:-9999em; 13 | -webkit-animation:load5 1.1s infinite ease; 14 | animation:load5 1.1s infinite ease; 15 | -webkit-transform: translateZ(0); 16 | -ms-transform: translateZ(0); 17 | transform: translateZ(0); 18 | } 19 | 20 | } 21 | 22 | @mixin load5-frames() { 23 | 24 | 0%, 25 | 100% { 26 | box-shadow:0em -2.6em 0em 0em rgba($foreground,1), 27 | 1.8em -1.8em 0 0em rgba($foreground,0.2), 28 | 2.5em 0em 0 0em rgba($foreground,0.2), 29 | 1.75em 1.75em 0 0em rgba($foreground,0.2), 30 | 0em 2.5em 0 0em rgba($foreground,0.2), 31 | -1.8em 1.8em 0 0em rgba($foreground,0.2), 32 | -2.6em 0em 0 0em rgba($foreground,0.5), 33 | -1.8em -1.8em 0 0em rgba($foreground,0.7); 34 | } 35 | 36 | 12.5% { 37 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.7), 38 | 1.8em -1.8em 0 0em rgba($foreground,1), 39 | 2.5em 0em 0 0em rgba($foreground,0.2), 40 | 1.75em 1.75em 0 0em rgba($foreground,0.2), 41 | 0em 2.5em 0 0em rgba($foreground,0.2), 42 | -1.8em 1.8em 0 0em rgba($foreground,0.2), 43 | -2.6em 0em 0 0em rgba($foreground,0.2), 44 | -1.8em -1.8em 0 0em rgba($foreground,0.5); 45 | } 46 | 47 | 25% { 48 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.5), 49 | 1.8em -1.8em 0 0em rgba($foreground,0.7), 50 | 2.5em 0em 0 0em rgba($foreground,1), 51 | 1.75em 1.75em 0 0em rgba($foreground,0.2), 52 | 0em 2.5em 0 0em rgba($foreground,0.2), 53 | -1.8em 1.8em 0 0em rgba($foreground,0.2), 54 | -2.6em 0em 0 0em rgba($foreground,0.2), 55 | -1.8em -1.8em 0 0em rgba($foreground,0.2); 56 | } 57 | 58 | 37.5% { 59 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2), 60 | 1.8em -1.8em 0 0em rgba($foreground,0.5), 61 | 2.5em 0em 0 0em rgba($foreground,0.7), 62 | 1.75em 1.75em 0 0em rgba($foreground,1), 63 | 0em 2.5em 0 0em rgba($foreground,0.2), 64 | -1.8em 1.8em 0 0em rgba($foreground,0.2), 65 | -2.6em 0em 0 0em rgba($foreground,0.2), 66 | -1.8em -1.8em 0 0em rgba($foreground,0.2); 67 | } 68 | 69 | 50% { 70 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2), 71 | 1.8em -1.8em 0 0em rgba($foreground,0.2), 72 | 2.5em 0em 0 0em rgba($foreground,0.5), 73 | 1.75em 1.75em 0 0em rgba($foreground,0.7), 74 | 0em 2.5em 0 0em rgba($foreground,1), 75 | -1.8em 1.8em 0 0em rgba($foreground,0.2), 76 | -2.6em 0em 0 0em rgba($foreground,0.2), 77 | -1.8em -1.8em 0 0em rgba($foreground,0.2); 78 | } 79 | 80 | 62.5% { 81 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2), 82 | 1.8em -1.8em 0 0em rgba($foreground,0.2), 83 | 2.5em 0em 0 0em rgba($foreground,0.2), 84 | 1.75em 1.75em 0 0em rgba($foreground,0.5), 85 | 0em 2.5em 0 0em rgba($foreground,0.7), 86 | -1.8em 1.8em 0 0em rgba($foreground,1), 87 | -2.6em 0em 0 0em rgba($foreground,0.2), 88 | -1.8em -1.8em 0 0em rgba($foreground,0.2); 89 | } 90 | 91 | 75% { 92 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2), 93 | 1.8em -1.8em 0 0em rgba($foreground,0.2), 94 | 2.5em 0em 0 0em rgba($foreground,0.2), 95 | 1.75em 1.75em 0 0em rgba($foreground,0.2), 96 | 0em 2.5em 0 0em rgba($foreground,0.5), 97 | -1.8em 1.8em 0 0em rgba($foreground,0.7), 98 | -2.6em 0em 0 0em rgba($foreground,1), 99 | -1.8em -1.8em 0 0em rgba($foreground,0.2); 100 | } 101 | 102 | 87.5% { 103 | box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2), 104 | 1.8em -1.8em 0 0em rgba($foreground,0.2), 105 | 2.5em 0em 0 0em rgba($foreground,0.2), 106 | 1.75em 1.75em 0 0em rgba($foreground,0.2), 107 | 0em 2.5em 0 0em rgba($foreground,0.2), 108 | -1.8em 1.8em 0 0em rgba($foreground,0.5), 109 | -2.6em 0em 0 0em rgba($foreground,0.7), 110 | -1.8em -1.8em 0 0em rgba($foreground,1); 111 | } 112 | 113 | } 114 | 115 | @-webkit-keyframes load5 {@include load5-frames;} 116 | @keyframes load5 {@include load5-frames;} 117 | -------------------------------------------------------------------------------- /sass/load6.scss: -------------------------------------------------------------------------------- 1 | $foreground: #fff; 2 | 3 | .load6 { 4 | 5 | .loader { 6 | color:$foreground; 7 | font-size:90px; 8 | text-indent:-9999em; 9 | overflow: hidden; 10 | width:1em; 11 | height:1em; 12 | border-radius:50%; 13 | margin:72px auto; 14 | position:relative; 15 | -webkit-transform: translateZ(0); 16 | -ms-transform: translateZ(0); 17 | transform: translateZ(0); 18 | -webkit-animation:load6 1.7s infinite ease; 19 | animation:load6 1.7s infinite ease; 20 | } 21 | 22 | } 23 | 24 | @mixin load6-frames() { 25 | 26 | 0% { 27 | -webkit-transform:rotate(0deg); 28 | transform:rotate(0deg); 29 | box-shadow: 30 | 0 -0.83em 0 -0.4em, 31 | 0 -0.83em 0 -0.42em, 32 | 0 -0.83em 0 -0.44em, 33 | 0 -0.83em 0 -0.46em, 34 | 0 -0.83em 0 -0.477em; 35 | } 36 | 37 | 5%, 38 | 95% { 39 | box-shadow: 40 | 0 -0.83em 0 -0.4em, 41 | 0 -0.83em 0 -0.42em, 42 | 0 -0.83em 0 -0.44em, 43 | 0 -0.83em 0 -0.46em, 44 | 0 -0.83em 0 -0.477em; 45 | } 46 | 47 | 10%, 48 | 59% { 49 | box-shadow: 50 | 0 -0.83em 0 -0.4em, 51 | -0.087em -0.825em 0 -0.42em, 52 | -0.173em -0.812em 0 -0.44em, 53 | -0.256em -0.789em 0 -0.46em, 54 | -0.297em -0.775em 0 -0.477em; 55 | } 56 | 57 | 20% { 58 | box-shadow: 59 | 0 -0.83em 0 -0.4em, 60 | -0.338em -0.758em 0 -0.42em, 61 | -0.555em -0.617em 0 -0.44em, 62 | -0.671em -0.488em 0 -0.46em, 63 | -0.749em -0.34em 0 -0.477em; 64 | } 65 | 66 | 38% { 67 | box-shadow: 68 | 0 -0.83em 0 -0.4em, 69 | -0.377em -0.74em 0 -0.42em, 70 | -0.645em -0.522em 0 -0.44em, 71 | -0.775em -0.297em 0 -0.46em, 72 | -0.82em -0.09em 0 -0.477em; 73 | } 74 | 75 | 100% { 76 | -webkit-transform:rotate(360deg); 77 | transform:rotate(360deg); 78 | box-shadow: 79 | 0 -0.83em 0 -0.4em, 80 | 0 -0.83em 0 -0.42em, 81 | 0 -0.83em 0 -0.44em, 82 | 0 -0.83em 0 -0.46em, 83 | 0 -0.83em 0 -0.477em; 84 | } 85 | 86 | } 87 | 88 | @-webkit-keyframes load6 {@include load6-frames;} 89 | @keyframes load6 {@include load6-frames;} 90 | -------------------------------------------------------------------------------- /sass/load7.scss: -------------------------------------------------------------------------------- 1 | $foreground: #fff; 2 | 3 | .load7 { 4 | 5 | .loader, 6 | .loader:before, 7 | .loader:after { 8 | border-radius:50%; 9 | width:2.5em; 10 | height:2.5em; 11 | -webkit-animation-fill-mode: both; 12 | animation-fill-mode: both; 13 | -webkit-animation:load7 1.8s infinite ease-in-out; 14 | animation:load7 1.8s infinite ease-in-out; 15 | } 16 | 17 | .loader { 18 | color:$foreground; 19 | font-size:10px; 20 | margin:80px auto; 21 | position:relative; 22 | text-indent:-9999em; 23 | -webkit-transform: translateZ(0); 24 | -ms-transform: translateZ(0); 25 | transform: translateZ(0); 26 | -webkit-animation-delay:-0.16s; 27 | animation-delay:-0.16s; 28 | 29 | &:before, 30 | &:after { 31 | content:''; 32 | position:absolute; 33 | top:0; 34 | } 35 | 36 | &:before { 37 | left:-3.5em; 38 | -webkit-animation-delay:-0.32s; 39 | animation-delay:-0.32s; 40 | } 41 | 42 | &:after { 43 | left:3.5em; 44 | } 45 | 46 | } 47 | 48 | } 49 | 50 | @mixin load7-frames() { 51 | 52 | 0%, 53 | 80%, 54 | 100% { 55 | box-shadow:0 2.5em 0 -1.3em; 56 | } 57 | 58 | 40% { 59 | box-shadow:0 2.5em 0 0; 60 | } 61 | 62 | } 63 | 64 | @-webkit-keyframes load7 {@include load7-frames;} 65 | @keyframes load7 {@include load7-frames;} 66 | -------------------------------------------------------------------------------- /sass/load8.scss: -------------------------------------------------------------------------------- 1 | $foreground: #fff; 2 | 3 | .load8 { 4 | 5 | .loader, 6 | .loader:after { 7 | border-radius:50%; 8 | width:10em; 9 | height:10em; 10 | } 11 | 12 | .loader { 13 | margin:60px auto; 14 | font-size:10px; 15 | position:relative; 16 | text-indent:-9999em; 17 | border-top:1.1em solid rgba($foreground,0.2); 18 | border-right:1.1em solid rgba($foreground,0.2); 19 | border-bottom:1.1em solid rgba($foreground,0.2); 20 | border-left:1.1em solid rgba($foreground,1); 21 | -webkit-transform: translateZ(0); 22 | -ms-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-animation:load8 1.1s infinite linear; 25 | animation:load8 1.1s infinite linear; 26 | } 27 | 28 | } 29 | 30 | @mixin load8-frames() { 31 | 32 | 0% { 33 | -webkit-transform:rotate(0deg); 34 | transform:rotate(0deg); 35 | } 36 | 37 | 100% { 38 | -webkit-transform:rotate(360deg); 39 | transform:rotate(360deg); 40 | } 41 | 42 | } 43 | 44 | @-webkit-keyframes load8 {@include load8-frames;} 45 | @keyframes load8 {@include load8-frames;} 46 | --------------------------------------------------------------------------------