Full Code of lukehaas/css-loaders for AI

step2 c7fdf5ac73c7 cached

33 files

50.1 KB

22.6k tokens

1 requests

Download .txt

Repository: lukehaas/css-loaders
Branch: step2
Commit: c7fdf5ac73c7
Files: 33
Total size: 50.1 KB

Directory structure:
gitextract_buk1bxj8/

├── .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
├── 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

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules/
css/main.css
images/me.jpeg
index.html
jade/
script/
less/main.less
.sass-cache


================================================
FILE: Gruntfile.js
================================================
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jade: {
      compile: {
          files: [{
              expand: true,
              cwd: 'jade/',
              src: ['**/*.jade'],
              dest: '',
              ext: '.html'
          }]
      }
    },
    less: {
      src: {
        expand: true,
        cwd: 'less/',
        src: ['**/*.less'],
        dest: 'css/',
        ext: '.css'
      }
    },
    sass: {
      options: {
        sourcemap:'none'
      },
      src: {
        expand: true,
        cwd: 'sass/',
        src: ['**/*.scss'],
        dest: 'css/',
        ext: '.css'
      }
    },
    watch: {
      files: ['less/**/*.less','jade/**/*.jade'],
      tasks: ['default']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jade');

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.loadNpmTasks('grunt-contrib-sass');

  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['less','jade','watch']);


};


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2014 Luke Haas

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

================================================
FILE: README.md
================================================
# [Single Element CSS Spinners](https://lukehaas.me/projects/css-loaders)

This is a collection of loading spinners animated with CSS.

Each spinner consists of a single `div` with a class of `loader` and content text of "Loading...".
The text is for screen readers and can be used as a fallback state for older browsers.

The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning.

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.

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.

## Demo

[![css-loaders-screenshot](https://raw.githubusercontent.com/lukehaas/css-loaders/step2/images/css-loaders-screenshot.jpg)](https://lukehaas.me/projects/css-loaders)

> [Check it live](https://lukehaas.me/projects/css-loaders).

## Browser Support

![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)
--- | --- | --- | --- | --- |
IE 10+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ |

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :)

## History

For detailed changelog, check [Releases](https://github.com/lukehaas/css-loaders/releases).

## License

[MIT License](https://github.com/lukehaas/css-loaders/blob/step2/LICENSE)

Browser testing via [![lambda test](https://www.lambdatest.com/support/img/logo.svg)](https://www.lambdatest.com/)


================================================
FILE: bower.json
================================================
{
  "name": "css-loading-spinners",
  "version": "1.0.0",
  "homepage": "https://github.com/lukehaas/css-loaders",
  "authors": [
    "Luke Haas <lukehaas7@gmail.com>"
  ],
  "description": "A collection of single element loading spinners, animated with CSS ",
  "main": "css",
  "moduleType": [
    "globals"
  ],
  "keywords": [
    "CSS",
    "spinner",
    "loader"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "tests"
  ]
}


================================================
FILE: css/fallback.css
================================================
/* Import this if you are using modernizr (recommended) 
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
*/
.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #FFF;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}
.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}


================================================
FILE: css/load1.css
================================================
.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.load1 .loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load1 .loader:before,
.load1 .loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.load1 .loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load1 .loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}


================================================
FILE: css/load2.css
================================================
.load2 .loader,
.load2 .loader:before,
.load2 .loader:after {
  border-radius: 50%;
}
.load2 .loader {
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.load2 .loader:before,
.load2 .loader:after {
  position: absolute;
  content: '';
}
.load2 .loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.load2 .loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


================================================
FILE: css/load3.css
================================================
.load3 .loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.load3 .loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.load3 .loader:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


================================================
FILE: css/load4.css
================================================
.load4 .loader {
  color: #ffffff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    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;
  }
  12.5% {
    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;
  }
  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;
  }
  37.5% {
    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;
  }
  50% {
    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;
  }
  62.5% {
    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;
  }
  75% {
    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;
  }
  87.5% {
    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;
  }
}
@keyframes load4 {
  0%,
  100% {
    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;
  }
  12.5% {
    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;
  }
  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;
  }
  37.5% {
    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;
  }
  50% {
    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;
  }
  62.5% {
    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;
  }
  75% {
    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;
  }
  87.5% {
    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;
  }
}


================================================
FILE: css/load5.css
================================================
.load5 .loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    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);
  }
  12.5% {
    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);
  }
  25% {
    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);
  }
  37.5% {
    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);
  }
  50% {
    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);
  }
  62.5% {
    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);
  }
  75% {
    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);
  }
  87.5% {
    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;
  }
}
@keyframes load5 {
  0%,
  100% {
    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);
  }
  12.5% {
    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);
  }
  25% {
    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);
  }
  37.5% {
    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);
  }
  50% {
    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);
  }
  62.5% {
    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);
  }
  75% {
    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);
  }
  87.5% {
    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;
  }
}


================================================
FILE: css/load6.css
================================================
.load6 .loader {
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    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;
  }
  5%,
  95% {
    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;
  }
  10%,
  59% {
    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;
  }
  20% {
    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;
  }
  38% {
    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;
  }
  100% {
    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;
  }
}
@keyframes load6 {
  0% {
    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;
  }
  5%,
  95% {
    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;
  }
  10%,
  59% {
    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;
  }
  20% {
    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;
  }
  38% {
    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;
  }
  100% {
    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;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


================================================
FILE: css/load7.css
================================================
.load7 .loader,
.load7 .loader:before,
.load7 .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.load7 .loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load7 .loader:before,
.load7 .loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.load7 .loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load7 .loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


================================================
FILE: css/load8.css
================================================
.load8 .loader,
.load8 .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.load8 .loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


================================================
FILE: less/fallback.less
================================================
/* Import this if you are using modernizr (recommended) 
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
*/

.no-cssanimations {

	.load-container {

		.loader {
			text-indent:0;
			text-align:center;
			color:#FFF;
			font-size:17px;
			background:none;
			border:0 none;
			width:auto;
			height:auto;
			margin:1em auto;
			overflow:visible;
			box-shadow:none;
			-webkit-animation:none;
			animation:none;

			&:before,
			&:after {
				display:none;
			}

		}

	}

}



================================================
FILE: less/load1.less
================================================
@foreground: #FFF;

.load1 {

  .loader,
  .loader:before,
  .loader:after {
    background:@foreground;
    -webkit-animation:load1 1s infinite ease-in-out;
    animation:load1 1s infinite ease-in-out;
    width:1em;
    height:4em;
  }

  .loader {
    color:@foreground;
    text-indent:-9999em;
    margin:88px auto;
    position:relative;
    font-size:11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;

    &:before,
    &:after {
      position:absolute;
      top:0;
      content:'';
    }

    &:before {
      left:-1.5em;
      -webkit-animation-delay:-0.32s;
      animation-delay:-0.32s;
    }

    &:after {
      left:1.5em;
    }

  }

}


@-webkit-keyframes load1 {.load1-frames;}
@keyframes load1 {.load1-frames;}

.load1-frames() {

  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }

  40% {
    box-shadow:0 -2em;
    height:5em;
  }

}


================================================
FILE: less/load2.less
================================================
@background: hsl(179,88%,41%);
@foreground: #FFF;

.load2 {

  .loader,
  .loader:before,
  .loader:after {
    border-radius:50%;
  }

  .loader {
    color:@foreground;
    font-size:11px;
    text-indent:-99999em;
    margin:55px auto;
    position:relative;
    width:10em;
    height:10em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before,
    &:after {
      position:absolute;
      content:'';
    }

    &:before {
      width:5.2em;
      height:10.2em;
      background: @background;
      border-radius: 10.2em 0 0 10.2em;
      top:-0.1em;
      left:-0.1em;
      -webkit-transform-origin:5.1em 5.1em;
      transform-origin:5.1em 5.1em;
      -webkit-animation:load2 2s infinite ease 1.5s;
      animation:load2 2s infinite ease 1.5s;
    }

    &:after {
      width:5.2em;
      height:10.2em;
      background: @background;
      border-radius: 0 10.2em 10.2em 0;
      top:-0.1em;
      left:4.9em;
      -webkit-transform-origin:0.1em 5.1em;
      transform-origin:0.1em 5.1em;
      -webkit-animation:load2 2s infinite ease;
      animation:load2 2s infinite ease;
    }

  }

}

@-webkit-keyframes load2 {.load2-frames;}
@keyframes load2 {.load2-frames;}

.load2-frames() {

  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }

  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }

}


================================================
FILE: less/load3.less
================================================
@background: hsl(179,88%,41%);
@foreground: #FFF;

.load3 {

  .loader {
    font-size:10px;
    margin:50px auto;
    text-indent:-9999em;
    width:11em;
    height:11em;
    border-radius:50%;
    background: @foreground;
    background: -moz-linear-gradient(left,  fade(@foreground,100%) 10%, fade(@foreground,0%) 42%);
    background: -webkit-linear-gradient(left,  fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
    background: -o-linear-gradient(left,  fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
    background: -ms-linear-gradient(left,  fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
    background: linear-gradient(to right,  fade(@foreground,100%) 10%,fade(@foreground,0%) 42%);
    position: relative;
    -webkit-animation:load3 1.4s infinite linear;
    animation:load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before {
      width:50%;
      height:50%;
      background: @foreground;
      border-radius: 100% 0 0 0;
      position:absolute;
      top:0;
      left:0;
      content:'';
    }

    &:after {
      background:@background;
      width:75%;
      height:75%;
      border-radius:50%;
      content:'';
      margin:auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

  }

}

@-webkit-keyframes load3 {.load3-frames;}
@keyframes load3 {.load3-frames;}

.load3-frames() {

  0% {
  	-webkit-transform:rotate(0deg);
  	transform:rotate(0deg);
  }

  100% {
  	-webkit-transform:rotate(360deg);
  	transform:rotate(360deg);
  }

}


================================================
FILE: less/load4.less
================================================
@foreground: #FFF;

.load4 {

  .loader {
    color:@foreground;
    font-size:20px;
    margin:100px auto;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load4 1.3s infinite linear;
    animation:load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

}
@-webkit-keyframes load4 {.load4-frames;}
@keyframes load4 {.load4-frames;}

.load4-frames() {

  0%,
  100% {
    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;
  }

  12.5% {
    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;
  }

  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;
  }

  37.5% {
    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;
  }

  50% {
    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;
  }

  62.5% {
    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;
  }

  75% {
    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;
  }

  87.5% {
    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;
  }

}


================================================
FILE: less/load5.less
================================================
@foreground: #fff;

.load5 {

  .loader {
    margin:100px auto;
    font-size:25px;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load5 1.1s infinite ease;
    animation:load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

}
@-webkit-keyframes load5 {.load5-frames;}
@keyframes load5 {.load5-frames;}

.load5-frames() {

  0%,
  100% {
  box-shadow:0em -2.6em 0em 0em fade(@foreground,100%),
    1.8em -1.8em 0 0em fade(@foreground,20%),
    2.5em 0em 0 0em fade(@foreground,20%),
    1.75em 1.75em 0 0em fade(@foreground,20%),
    0em 2.5em 0 0em fade(@foreground,20%),
    -1.8em 1.8em 0 0em fade(@foreground,20%),
    -2.6em 0em 0 0em fade(@foreground,50%),
    -1.8em -1.8em 0 0em fade(@foreground,70%);
  }

  12.5% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,70%),
    1.8em -1.8em 0 0em fade(@foreground,100%),
    2.5em 0em 0 0em fade(@foreground,20%),
    1.75em 1.75em 0 0em fade(@foreground,20%),
    0em 2.5em 0 0em fade(@foreground,20%),
    -1.8em 1.8em 0 0em fade(@foreground,20%),
    -2.6em 0em 0 0em fade(@foreground,20%),
    -1.8em -1.8em 0 0em fade(@foreground,50%);
  }

  25% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,50%),
    1.8em -1.8em 0 0em fade(@foreground,70%),
    2.5em 0em 0 0em fade(@foreground,100%),
    1.75em 1.75em 0 0em fade(@foreground,20%),
    0em 2.5em 0 0em fade(@foreground,20%),
    -1.8em 1.8em 0 0em fade(@foreground,20%),
    -2.6em 0em 0 0em fade(@foreground,20%),
    -1.8em -1.8em 0 0em fade(@foreground,20%);
  }

  37.5% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,20%),
    1.8em -1.8em 0 0em fade(@foreground,50%),
    2.5em 0em 0 0em fade(@foreground,70%),
    1.75em 1.75em 0 0em fade(@foreground,100%),
    0em 2.5em 0 0em fade(@foreground,20%),
    -1.8em 1.8em 0 0em fade(@foreground,20%),
    -2.6em 0em 0 0em fade(@foreground,20%),
    -1.8em -1.8em 0 0em fade(@foreground,20%);
  }

  50% {
  box-shadow:0em -2.6em 0em 0em fade(@foreground,20%),
    1.8em -1.8em 0 0em fade(@foreground,20%),
    2.5em 0em 0 0em fade(@foreground,50%),
    1.75em 1.75em 0 0em fade(@foreground,70%),
    0em 2.5em 0 0em fade(@foreground,100%),
    -1.8em 1.8em 0 0em fade(@foreground,20%),
    -2.6em 0em 0 0em fade(@foreground,20%),
    -1.8em -1.8em 0 0em fade(@foreground,20%);
  }

  62.5% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,20%),
    1.8em -1.8em 0 0em fade(@foreground,20%),
    2.5em 0em 0 0em fade(@foreground,20%),
    1.75em 1.75em 0 0em fade(@foreground,50%),
    0em 2.5em 0 0em fade(@foreground,70%),
    -1.8em 1.8em 0 0em fade(@foreground,100%),
    -2.6em 0em 0 0em fade(@foreground,20%),
    -1.8em -1.8em 0 0em fade(@foreground,20%);
  }

  75% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,20%),
    1.8em -1.8em 0 0em fade(@foreground,20%),
    2.5em 0em 0 0em fade(@foreground,20%),
    1.75em 1.75em 0 0em fade(@foreground,20%),
    0em 2.5em 0 0em fade(@foreground,50%),
    -1.8em 1.8em 0 0em fade(@foreground,70%),
    -2.6em 0em 0 0em fade(@foreground,100%),
    -1.8em -1.8em 0 0em fade(@foreground,20%);
  }

  87.5% {
    box-shadow:0em -2.6em 0em 0em fade(@foreground,20%),
    1.8em -1.8em 0 0em fade(@foreground,20%),
    2.5em 0em 0 0em fade(@foreground,20%),
    1.75em 1.75em 0 0em fade(@foreground,20%),
    0em 2.5em 0 0em fade(@foreground,20%),
    -1.8em 1.8em 0 0em fade(@foreground,50%),
    -2.6em 0em 0 0em fade(@foreground,70%),
    -1.8em -1.8em 0 0em fade(@foreground,100%);
  }
  
}


================================================
FILE: less/load6.less
================================================
@foreground: #fff;

.load6 {

  .loader {
    color:@foreground;
    font-size:90px;
    text-indent:-9999em;
    overflow: hidden;
    width:1em;
    height:1em;
    border-radius:50%;
    margin:72px auto;
    position:relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation:load6 1.7s infinite ease, round 1.7s infinite ease;
    animation:load6 1.7s infinite ease, round 1.7s infinite ease;;
  }

}
@-webkit-keyframes load6 {.load6-frames;}
@keyframes load6 {.load6-frames;}

@-webkit-keyframes round {.round;}
@keyframes round {.round;}

.round() {
  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}

.load6-frames() {
  0% {
  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;
  }
  5%,
  95% {
    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;
  }

  10%,
  59% {
    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;
  }

  20% {
    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;
  }

  38% {
    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;
  }
  100% {
    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;
  }
}


================================================
FILE: less/load7.less
================================================
@foreground: #fff;

.load7 {

  .loader,
  .loader:before,
  .loader:after {
    border-radius:50%;
    width:2.5em;
    height:2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation:load7 1.8s infinite ease-in-out;
    animation:load7 1.8s infinite ease-in-out;
  }

  .loader {
    color:@foreground;
    font-size:10px;
    margin:80px auto;
    position:relative;
    text-indent:-9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;

    &:before,
    &:after {
      content:'';
      position:absolute;
      top:0;
    }

    &:before {
      left:-3.5em;
      -webkit-animation-delay:-0.32s;
      animation-delay:-0.32s;
    }

    &:after {
      left:3.5em;
    }

  }

}

@-webkit-keyframes load7 {.load7-frames;}
@keyframes load7 {.load7-frames;}

.load7-frames() {

  0%,
  80%,
  100% {
    box-shadow:0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow:0 2.5em 0 0;
  }

}


================================================
FILE: less/load8.less
================================================
@foreground: #fff;

.load8 {

  .loader,
  .loader:after {
    border-radius:50%;
    width:10em;
    height:10em;
  }

  .loader {
    margin:60px auto;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    border-top:1.1em solid fade(@foreground,20%);
    border-right:1.1em solid fade(@foreground,20%);
    border-bottom:1.1em solid fade(@foreground,20%);
    border-left:1.1em solid fade(@foreground,100%);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation:load8 1.1s infinite linear;
    animation:load8 1.1s infinite linear;
  }

}

@-webkit-keyframes load8 {.load8-frames;}
@keyframes load8 {.load8-frames;}

.load8-frames() {

  0% {
  	-webkit-transform:rotate(0deg);
  	transform:rotate(0deg);
  }

  100% {
  	-webkit-transform:rotate(360deg);
  	transform:rotate(360deg);
  }

}


================================================
FILE: package.json
================================================
{
  "name": "css-loaders",
  "version": "0.1.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luke Haas",
  "license": "BSD",
  "devDependencies": {
    "grunt": "~0.4.4",
    "grunt-contrib-jade": "~0.11.0",
    "grunt-contrib-less": "^0.11.0",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}


================================================
FILE: sass/fallback.scss
================================================
/* Import this if you are using modernizr (recommended) 
It means that loaders will fallback to a text state of simply saying "Loading..." in older browsers
*/

.no-cssanimations {

	.load-container {

		.loader {
			text-indent:0;
			text-align:center;
			color:#FFF;
			font-size:17px;
			background:none;
			border:0 none;
			width:auto;
			height:auto;
			margin:1em auto;
			overflow:visible;
			box-shadow:none;
			-webkit-animation:none;
			animation:none;

			&:before,
			&:after {
				display:none;
			}

		}

	}

}



================================================
FILE: sass/load1.scss
================================================
$foreground: #FFF;

.load1 {

  .loader,
  .loader:before,
  .loader:after {
    background:$foreground;
    -webkit-animation:load1 1s infinite ease-in-out;
    animation:load1 1s infinite ease-in-out;
    width:1em;
    height:4em;
  }

  .loader {
    color:$foreground;
    text-indent:-9999em;
    margin:88px auto;
    position:relative;
    font-size:11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;

    &:before,
    &:after {
      position:absolute;
      top:0;
      content:'';
    }

    &:before {
      left:-1.5em;
      -webkit-animation-delay:-0.32s;
      animation-delay:-0.32s;
    }

    &:after {
      left:1.5em;
    }

  }

}

@mixin load1-frames {
  0%,
  80%,
  100% {
    box-shadow:0 0;
    height:4em;
  }

  40% {
    box-shadow:0 -2em;
    height:5em;
  }
}

@-webkit-keyframes load1 {@include load1-frames;}
@keyframes load1 {@include load1-frames;}


================================================
FILE: sass/load2.scss
================================================
$background: hsl(179,88%,41%);
$foreground: #FFF;

.load2 {

  .loader,
  .loader:before,
  .loader:after {
    border-radius:50%;
  }

  .loader {
    color:$foreground;
    font-size:11px;
    text-indent:-99999em;
    margin:55px auto;
    position:relative;
    width:10em;
    height:10em;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before,
    &:after {
      position:absolute;
      content:'';
    }

    &:before {
      width:5.2em;
      height:10.2em;
      background: $background;
      border-radius: 10.2em 0 0 10.2em;
      top:-0.1em;
      left:-0.1em;
      -webkit-transform-origin:5.1em 5.1em;
      transform-origin:5.1em 5.1em;
      -webkit-animation:load2 2s infinite ease 1.5s;
      animation:load2 2s infinite ease 1.5s;
    }

    &:after {
      width:5.2em;
      height:10.2em;
      background: $background;
      border-radius: 0 10.2em 10.2em 0;
      top:-0.1em;
      left:4.9em;
      -webkit-transform-origin:0.1em 5.1em;
      transform-origin:0.1em 5.1em;
      -webkit-animation:load2 2s infinite ease;
      animation:load2 2s infinite ease;
    }

  }

}

@mixin load2-frames() {

  0% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }

  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }

}

@-webkit-keyframes load2 {@include load2-frames;}
@keyframes load2 {@include load2-frames;}


================================================
FILE: sass/load3.scss
================================================
$background: hsl(179,88%,41%);
$foreground: #FFF;

.load3 {

  .loader {
    font-size:10px;
    margin:50px auto;
    text-indent:-9999em;
    width:11em;
    height:11em;
    border-radius:50%;
    background: $foreground;
    background: -moz-linear-gradient(left,  rgba($foreground,1) 10%, rgba($foreground,0) 42%);
    background: -webkit-linear-gradient(left,  rgba($foreground,1) 10%,rgba($foreground,0) 42%);
    background: -o-linear-gradient(left,  rgba($foreground,1) 10%,rgba($foreground,0) 42%);
    background: -ms-linear-gradient(left,  rgba($foreground,1) 10%,rgba($foreground,0) 42%);
    background: linear-gradient(to right,  rgba($foreground,1) 10%,rgba($foreground,0) 42%);
    position: relative;
    -webkit-animation:load3 1.4s infinite linear;
    animation:load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);

    &:before {
      width:50%;
      height:50%;
      background: $foreground;
      border-radius: 100% 0 0 0;
      position:absolute;
      top:0;
      left:0;
      content:'';
    }

    &:after {
      background:$background;
      width:75%;
      height:75%;
      border-radius:50%;
      content:'';
      margin:auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

  }

}

@mixin load3-frames() {

  0% {
  	-webkit-transform:rotate(0deg);
  	transform:rotate(0deg);
  }

  100% {
  	-webkit-transform:rotate(360deg);
  	transform:rotate(360deg);
  }

}

@-webkit-keyframes load3 {@include load3-frames;}
@keyframes load3 {@include load3-frames;}


================================================
FILE: sass/load4.scss
================================================
$foreground: #FFF;

.load4 {

  .loader {
    color:$foreground;
    font-size:20px;
    margin:100px auto;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load4 1.3s infinite linear;
    animation:load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

}

@mixin load4-frames() {

  0%,
  100% {
    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;
  }

  12.5% {
    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;
  }

  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;
  }

  37.5% {
    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;
  }

  50% {
    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;
  }

  62.5% {
    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;
  }

  75% {
    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;
  }

  87.5% {
    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;
  }

}

@-webkit-keyframes load4 {@include load4-frames;}
@keyframes load4 {@include load4-frames;}


================================================
FILE: sass/load5.scss
================================================
$foreground: #fff;

.load5 {

  .loader {
    margin:100px auto;
    font-size:25px;
    width:1em;
    height:1em;
    border-radius:50%;
    position:relative;
    text-indent:-9999em;
    -webkit-animation:load5 1.1s infinite ease;
    animation:load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }

}

@mixin load5-frames() {

  0%,
  100% {
  box-shadow:0em -2.6em 0em 0em rgba($foreground,1),
    1.8em -1.8em 0 0em rgba($foreground,0.2),
    2.5em 0em 0 0em rgba($foreground,0.2),
    1.75em 1.75em 0 0em rgba($foreground,0.2),
    0em 2.5em 0 0em rgba($foreground,0.2),
    -1.8em 1.8em 0 0em rgba($foreground,0.2),
    -2.6em 0em 0 0em rgba($foreground,0.5),
    -1.8em -1.8em 0 0em rgba($foreground,0.7);
  }

  12.5% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.7),
    1.8em -1.8em 0 0em rgba($foreground,1),
    2.5em 0em 0 0em rgba($foreground,0.2),
    1.75em 1.75em 0 0em rgba($foreground,0.2),
    0em 2.5em 0 0em rgba($foreground,0.2),
    -1.8em 1.8em 0 0em rgba($foreground,0.2),
    -2.6em 0em 0 0em rgba($foreground,0.2),
    -1.8em -1.8em 0 0em rgba($foreground,0.5);
  }

  25% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.5),
    1.8em -1.8em 0 0em rgba($foreground,0.7),
    2.5em 0em 0 0em rgba($foreground,1),
    1.75em 1.75em 0 0em rgba($foreground,0.2),
    0em 2.5em 0 0em rgba($foreground,0.2),
    -1.8em 1.8em 0 0em rgba($foreground,0.2),
    -2.6em 0em 0 0em rgba($foreground,0.2),
    -1.8em -1.8em 0 0em rgba($foreground,0.2);
  }

  37.5% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2),
    1.8em -1.8em 0 0em rgba($foreground,0.5),
    2.5em 0em 0 0em rgba($foreground,0.7),
    1.75em 1.75em 0 0em rgba($foreground,1),
    0em 2.5em 0 0em rgba($foreground,0.2),
    -1.8em 1.8em 0 0em rgba($foreground,0.2),
    -2.6em 0em 0 0em rgba($foreground,0.2),
    -1.8em -1.8em 0 0em rgba($foreground,0.2);
  }

  50% {
  box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2),
    1.8em -1.8em 0 0em rgba($foreground,0.2),
    2.5em 0em 0 0em rgba($foreground,0.5),
    1.75em 1.75em 0 0em rgba($foreground,0.7),
    0em 2.5em 0 0em rgba($foreground,1),
    -1.8em 1.8em 0 0em rgba($foreground,0.2),
    -2.6em 0em 0 0em rgba($foreground,0.2),
    -1.8em -1.8em 0 0em rgba($foreground,0.2);
  }

  62.5% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2),
    1.8em -1.8em 0 0em rgba($foreground,0.2),
    2.5em 0em 0 0em rgba($foreground,0.2),
    1.75em 1.75em 0 0em rgba($foreground,0.5),
    0em 2.5em 0 0em rgba($foreground,0.7),
    -1.8em 1.8em 0 0em rgba($foreground,1),
    -2.6em 0em 0 0em rgba($foreground,0.2),
    -1.8em -1.8em 0 0em rgba($foreground,0.2);
  }

  75% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2),
    1.8em -1.8em 0 0em rgba($foreground,0.2),
    2.5em 0em 0 0em rgba($foreground,0.2),
    1.75em 1.75em 0 0em rgba($foreground,0.2),
    0em 2.5em 0 0em rgba($foreground,0.5),
    -1.8em 1.8em 0 0em rgba($foreground,0.7),
    -2.6em 0em 0 0em rgba($foreground,1),
    -1.8em -1.8em 0 0em rgba($foreground,0.2);
  }

  87.5% {
    box-shadow:0em -2.6em 0em 0em rgba($foreground,0.2),
    1.8em -1.8em 0 0em rgba($foreground,0.2),
    2.5em 0em 0 0em rgba($foreground,0.2),
    1.75em 1.75em 0 0em rgba($foreground,0.2),
    0em 2.5em 0 0em rgba($foreground,0.2),
    -1.8em 1.8em 0 0em rgba($foreground,0.5),
    -2.6em 0em 0 0em rgba($foreground,0.7),
    -1.8em -1.8em 0 0em rgba($foreground,1);
  }

}

@-webkit-keyframes load5 {@include load5-frames;}
@keyframes load5 {@include load5-frames;}


================================================
FILE: sass/load6.scss
================================================
$foreground: #fff;

.load6 {

  .loader {
    color:$foreground;
    font-size:90px;
    text-indent:-9999em;
    overflow: hidden;
    width:1em;
    height:1em;
    border-radius:50%;
    margin:72px auto;
    position:relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation:load6 1.7s infinite ease;
    animation:load6 1.7s infinite ease;
  }

}

@mixin load6-frames() {

  0% {
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  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;
  }

  5%,
  95% {
    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;
  }

  10%,
  59% {
    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;
  }

  20% {
    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;
  }

  38% {
    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;
  }

  100% {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    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;
  }

}

@-webkit-keyframes load6 {@include load6-frames;}
@keyframes load6 {@include load6-frames;}


================================================
FILE: sass/load7.scss
================================================
$foreground: #fff;

.load7 {

  .loader,
  .loader:before,
  .loader:after {
    border-radius:50%;
    width:2.5em;
    height:2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation:load7 1.8s infinite ease-in-out;
    animation:load7 1.8s infinite ease-in-out;
  }

  .loader {
    color:$foreground;
    font-size:10px;
    margin:80px auto;
    position:relative;
    text-indent:-9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay:-0.16s;
    animation-delay:-0.16s;

    &:before,
    &:after {
      content:'';
      position:absolute;
      top:0;
    }

    &:before {
      left:-3.5em;
      -webkit-animation-delay:-0.32s;
      animation-delay:-0.32s;
    }

    &:after {
      left:3.5em;
    }

  }

}

@mixin load7-frames() {

  0%,
  80%,
  100% {
    box-shadow:0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow:0 2.5em 0 0;
  }

}

@-webkit-keyframes load7 {@include load7-frames;}
@keyframes load7 {@include load7-frames;}


================================================
FILE: sass/load8.scss
================================================
$foreground: #fff;

.load8 {

  .loader,
  .loader:after {
    border-radius:50%;
    width:10em;
    height:10em;
  }

  .loader {
    margin:60px auto;
    font-size:10px;
    position:relative;
    text-indent:-9999em;
    border-top:1.1em solid rgba($foreground,0.2);
    border-right:1.1em solid rgba($foreground,0.2);
    border-bottom:1.1em solid rgba($foreground,0.2);
    border-left:1.1em solid rgba($foreground,1);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation:load8 1.1s infinite linear;
    animation:load8 1.1s infinite linear;
  }

}

@mixin load8-frames() {

  0% {
  	-webkit-transform:rotate(0deg);
  	transform:rotate(0deg);
  }

  100% {
  	-webkit-transform:rotate(360deg);
  	transform:rotate(360deg);
  }

}

@-webkit-keyframes load8 {@include load8-frames;}
@keyframes load8 {@include load8-frames;}

Download .txt

gitextract_buk1bxj8/

├── .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
├── 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

Download .json

Condensed preview — 33 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (55K chars).

[
  {
    "path": ".gitignore",
    "chars": 94,
    "preview": "node_modules/\ncss/main.css\nimages/me.jpeg\nindex.html\njade/\nscript/\nless/main.less\n.sass-cache\n"
  },
  {
    "path": "Gruntfile.js",
    "chars": 1053,
    "preview": "module.exports = function(grunt) {\n\n  // Project configuration.\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('packa"
  },
  {
    "path": "LICENSE",
    "chars": 1075,
    "preview": "The MIT License (MIT)\n\nCopyright (c) 2014 Luke Haas\n\nPermission is hereby granted, free of charge, to any person obtaini"
  },
  {
    "path": "README.md",
    "chars": 2142,
    "preview": "# [Single Element CSS Spinners](https://lukehaas.me/projects/css-loaders)\n\nThis is a collection of loading spinners anim"
  },
  {
    "path": "bower.json",
    "chars": 484,
    "preview": "{\n  \"name\": \"css-loading-spinners\",\n  \"version\": \"1.0.0\",\n  \"homepage\": \"https://github.com/lukehaas/css-loaders\",\n  \"au"
  },
  {
    "path": "css/fallback.css",
    "chars": 575,
    "preview": "/* Import this if you are using modernizr (recommended) \nIt means that loaders will fallback to a text state of simply s"
  },
  {
    "path": "css/load1.css",
    "chars": 1016,
    "preview": ".load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n  background: #ffffff;\n  -webkit-animation: load1 1s infin"
  },
  {
    "path": "css/load2.css",
    "chars": 1443,
    "preview": ".load2 .loader,\n.load2 .loader:before,\n.load2 .loader:after {\n  border-radius: 50%;\n}\n.load2 .loader {\n  color: #ffffff;"
  },
  {
    "path": "css/load3.css",
    "chars": 1514,
    "preview": ".load3 .loader {\n  font-size: 10px;\n  margin: 50px auto;\n  text-indent: -9999em;\n  width: 11em;\n  height: 11em;\n  border"
  },
  {
    "path": "css/load4.css",
    "chars": 2867,
    "preview": ".load4 .loader {\n  color: #ffffff;\n  font-size: 20px;\n  margin: 100px auto;\n  width: 1em;\n  height: 1em;\n  border-radius"
  },
  {
    "path": "css/load5.css",
    "chars": 6259,
    "preview": ".load5 .loader {\n  margin: 100px auto;\n  font-size: 25px;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  position:"
  },
  {
    "path": "css/load6.css",
    "chars": 2654,
    "preview": ".load6 .loader {\n  color: #ffffff;\n  font-size: 90px;\n  text-indent: -9999em;\n  overflow: hidden;\n  width: 1em;\n  height"
  },
  {
    "path": "css/load7.css",
    "chars": 1057,
    "preview": ".load7 .loader,\n.load7 .loader:before,\n.load7 .loader:after {\n  border-radius: 50%;\n  width: 2.5em;\n  height: 2.5em;\n  -"
  },
  {
    "path": "css/load8.css",
    "chars": 952,
    "preview": ".load8 .loader,\n.load8 .loader:after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n.load8 .loader {\n  margin:"
  },
  {
    "path": "less/fallback.less",
    "chars": 527,
    "preview": "/* Import this if you are using modernizr (recommended) \nIt means that loaders will fallback to a text state of simply s"
  },
  {
    "path": "less/load1.less",
    "chars": 992,
    "preview": "@foreground: #FFF;\n\n.load1 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    background:@foreground;\n    -webkit-ani"
  },
  {
    "path": "less/load2.less",
    "chars": 1457,
    "preview": "@background: hsl(179,88%,41%);\n@foreground: #FFF;\n\n.load2 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    border-r"
  },
  {
    "path": "less/load3.less",
    "chars": 1603,
    "preview": "@background: hsl(179,88%,41%);\n@foreground: #FFF;\n\n.load3 {\n\n  .loader {\n    font-size:10px;\n    margin:50px auto;\n    t"
  },
  {
    "path": "less/load4.less",
    "chars": 1961,
    "preview": "@foreground: #FFF;\n\n.load4 {\n\n  .loader {\n    color:@foreground;\n    font-size:20px;\n    margin:100px auto;\n    width:1e"
  },
  {
    "path": "less/load5.less",
    "chars": 3591,
    "preview": "@foreground: #fff;\n\n.load5 {\n\n  .loader {\n    margin:100px auto;\n    font-size:25px;\n    width:1em;\n    height:1em;\n    "
  },
  {
    "path": "less/load6.less",
    "chars": 1825,
    "preview": "@foreground: #fff;\n\n.load6 {\n\n  .loader {\n    color:@foreground;\n    font-size:90px;\n    text-indent:-9999em;\n    overfl"
  },
  {
    "path": "less/load7.less",
    "chars": 1050,
    "preview": "@foreground: #fff;\n\n.load7 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    border-radius:50%;\n    width:2.5em;\n   "
  },
  {
    "path": "less/load8.less",
    "chars": 883,
    "preview": "@foreground: #fff;\n\n.load8 {\n\n  .loader,\n  .loader:after {\n    border-radius:50%;\n    width:10em;\n    height:10em;\n  }\n\n"
  },
  {
    "path": "package.json",
    "chars": 417,
    "preview": "{\n  \"name\": \"css-loaders\",\n  \"version\": \"0.1.0\",\n  \"description\": \"\",\n  \"main\": \"Gruntfile.js\",\n  \"scripts\": {\n    \"test"
  },
  {
    "path": "sass/fallback.scss",
    "chars": 527,
    "preview": "/* Import this if you are using modernizr (recommended) \nIt means that loaders will fallback to a text state of simply s"
  },
  {
    "path": "sass/load1.scss",
    "chars": 1009,
    "preview": "$foreground: #FFF;\n\n.load1 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    background:$foreground;\n    -webkit-ani"
  },
  {
    "path": "sass/load2.scss",
    "chars": 1479,
    "preview": "$background: hsl(179,88%,41%);\n$foreground: #FFF;\n\n.load2 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    border-r"
  },
  {
    "path": "sass/load3.scss",
    "chars": 1605,
    "preview": "$background: hsl(179,88%,41%);\n$foreground: #FFF;\n\n.load3 {\n\n  .loader {\n    font-size:10px;\n    margin:50px auto;\n    t"
  },
  {
    "path": "sass/load4.scss",
    "chars": 1984,
    "preview": "$foreground: #FFF;\n\n.load4 {\n\n  .loader {\n    color:$foreground;\n    font-size:20px;\n    margin:100px auto;\n    width:1e"
  },
  {
    "path": "sass/load5.scss",
    "chars": 3588,
    "preview": "$foreground: #fff;\n\n.load5 {\n\n  .loader {\n    margin:100px auto;\n    font-size:25px;\n    width:1em;\n    height:1em;\n    "
  },
  {
    "path": "sass/load6.scss",
    "chars": 1694,
    "preview": "$foreground: #fff;\n\n.load6 {\n\n  .loader {\n    color:$foreground;\n    font-size:90px;\n    text-indent:-9999em;\n    overfl"
  },
  {
    "path": "sass/load7.scss",
    "chars": 1072,
    "preview": "$foreground: #fff;\n\n.load7 {\n\n  .loader,\n  .loader:before,\n  .loader:after {\n    border-radius:50%;\n    width:2.5em;\n   "
  },
  {
    "path": "sass/load8.scss",
    "chars": 902,
    "preview": "$foreground: #fff;\n\n.load8 {\n\n  .loader,\n  .loader:after {\n    border-radius:50%;\n    width:10em;\n    height:10em;\n  }\n\n"
  }
]

About this extraction

This page contains the full source code of the lukehaas/css-loaders GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 33 files (50.1 KB), approximately 22.6k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.

Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.

Extract another repo