├── .gitignore ├── .editorconfig ├── src ├── _variables.scss ├── loaders.scss ├── _animations.scss └── loaders │ ├── _loader05.scss │ ├── _loader02.scss │ ├── _loader03.scss │ ├── _loader04.scss │ ├── _loader10.scss │ ├── _loader01.scss │ ├── _loader09.scss │ ├── _loader06.scss │ ├── _loader11.scss │ ├── _loader12.scss │ ├── _loader08.scss │ └── _loader07.scss ├── bower.json ├── package.json ├── gulpfile.js ├── LICENSE ├── examples ├── index.html ├── scss │ └── style.scss └── style.css ├── README.md └── .scss-lint.yml /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/_variables.scss: -------------------------------------------------------------------------------- 1 | $loader-color: #0052ec !default; 2 | $loader-size: 56px !default; 3 | $loader-height: 20px !default; 4 | $loader-border-size: 8px !default; 5 | $loader-gap: 12px !default; 6 | $loader-animation-duration: 1s !default; 7 | -------------------------------------------------------------------------------- /src/loaders.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | @import 'variables'; 3 | @import 'animations'; 4 | 5 | @import 'loaders/loader01'; 6 | @import 'loaders/loader02'; 7 | @import 'loaders/loader03'; 8 | @import 'loaders/loader04'; 9 | @import 'loaders/loader05'; 10 | @import 'loaders/loader06'; 11 | @import 'loaders/loader07'; 12 | @import 'loaders/loader08'; 13 | @import 'loaders/loader09'; 14 | @import 'loaders/loader10'; 15 | @import 'loaders/loader11'; 16 | @import 'loaders/loader12'; 17 | -------------------------------------------------------------------------------- /src/_animations.scss: -------------------------------------------------------------------------------- 1 | @mixin loader-rotate { 2 | @keyframes loader-rotate { 3 | 0% { 4 | transform: rotate(0); 5 | } 6 | 7 | 100% { 8 | transform: rotate(360deg); 9 | } 10 | } 11 | } 12 | 13 | @mixin loader-scale { 14 | @keyframes loader-scale { 15 | 0% { 16 | transform: scale(0); 17 | opacity: 0; 18 | } 19 | 20 | 50% { 21 | opacity: 1; 22 | } 23 | 24 | 100% { 25 | transform: scale(1); 26 | opacity: 0; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spinthatshit", 3 | "homepage": "https://github.com/MatejKustec/SpinThatShit", 4 | "version": "1.0.4", 5 | "authors": [ 6 | "Matej Kustec" 7 | ], 8 | "description": "A set of SCSS mixins for single element loaders and spinners", 9 | "main": "src/loaders.scss", 10 | "moduleType": [ 11 | "globals" 12 | ], 13 | "keywords": [ 14 | "spinthatshit", 15 | "css", 16 | "loaders", 17 | "spinners", 18 | "scss", 19 | "sass" 20 | ], 21 | "license": "MIT" 22 | } 23 | -------------------------------------------------------------------------------- /src/loaders/_loader05.scss: -------------------------------------------------------------------------------- 1 | @mixin loader05( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $border-size: $loader-border-size, 5 | $duration: $loader-animation-duration, 6 | $align: null 7 | ) { 8 | width: $size; 9 | height: $size; 10 | border: $border-size solid $color; 11 | border-radius: 50%; 12 | position: relative; 13 | animation: loader-scale $duration ease-out infinite; 14 | @if ($align == center) { 15 | margin: 0 auto; 16 | } 17 | @if ($align == middle) { 18 | top: 50%; 19 | margin: -(math.div($size, 2)) auto 0; 20 | } 21 | @include loader-scale; 22 | } 23 | -------------------------------------------------------------------------------- /src/loaders/_loader02.scss: -------------------------------------------------------------------------------- 1 | @mixin loader02( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $border-size: $loader-border-size, 5 | $duration: $loader-animation-duration, 6 | $align: null 7 | ) { 8 | width: $size; 9 | height: $size; 10 | border: $border-size solid rgba($color, 0.25); 11 | border-top-color: $color; 12 | border-radius: 50%; 13 | position: relative; 14 | animation: loader-rotate $duration linear infinite; 15 | 16 | @if ($align == center) { 17 | margin: 0 auto; 18 | } 19 | 20 | @if ($align == middle) { 21 | top: 50%; 22 | margin: -(math.div($size, 2)) auto 0; 23 | } 24 | 25 | @include loader-rotate; 26 | } 27 | -------------------------------------------------------------------------------- /src/loaders/_loader03.scss: -------------------------------------------------------------------------------- 1 | @mixin loader03( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $border-size: $loader-border-size, 5 | $duration: $loader-animation-duration, 6 | $align: null 7 | ) { 8 | width: $size; 9 | height: $size; 10 | border: $border-size solid transparent; 11 | border-top-color: $color; 12 | border-bottom-color: $color; 13 | border-radius: 50%; 14 | position: relative; 15 | animation: loader-rotate $duration linear infinite; 16 | 17 | @if ($align == center) { 18 | margin: 0 auto; 19 | } 20 | 21 | @if ($align == middle) { 22 | top: 50%; 23 | margin: -(math.div($size, 2)) auto 0; 24 | } 25 | 26 | @include loader-rotate; 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spinthatshit", 3 | "version": "1.0.4", 4 | "description": "A set of SCSS mixins for single element loaders and spinners", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/MatejKustec/SpinThatShit.git" 12 | }, 13 | "keywords": [ 14 | "spinthatshit", 15 | "css", 16 | "loaders", 17 | "spinners", 18 | "scss", 19 | "sass" 20 | ], 21 | "author": "Matej Kustec", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/MatejKustec/SpinThatShit/issues" 25 | }, 26 | "homepage": "https://github.com/MatejKustec/SpinThatShit#readme", 27 | "devDependencies": { 28 | "browser-sync": "^2.14.0", 29 | "gulp": "^3.9.1", 30 | "gulp-plumber": "^1.1.0", 31 | "gulp-sass": "^2.3.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/loaders/_loader04.scss: -------------------------------------------------------------------------------- 1 | @mixin loader04( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $border-size: $loader-border-size, 5 | $duration: $loader-animation-duration, $align: null 6 | ) { 7 | $dot: round($size - (0.82 * $size)); 8 | width: $size; 9 | height: $size; 10 | border: $border-size solid rgba($color, 0.5); 11 | border-radius: 50%; 12 | position: relative; 13 | animation: loader-rotate $duration ease-in-out infinite; 14 | 15 | &::after { 16 | content: ''; 17 | width: $dot; 18 | height: $dot; 19 | border-radius: 50%; 20 | background: $color; 21 | position: absolute; 22 | top: -$border-size - math.div($dot, 2) + math.div($border-size, 2); 23 | left: 50%; 24 | margin-left: -(math.div($dot, 2)); 25 | } 26 | 27 | @if ($align == center) { 28 | margin: 0 auto; 29 | } 30 | 31 | @if ($align == middle) { 32 | top: 50%; 33 | margin: -(math.div($size, 2)) auto 0; 34 | } 35 | 36 | @include loader-rotate; 37 | } 38 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var browserSync = require('browser-sync').create(); 5 | var sass = require('gulp-sass'); 6 | var plumber = require('gulp-plumber'); 7 | 8 | // Static Server + watching scss/html files 9 | gulp.task('serve', ['sass'], function() { 10 | 11 | browserSync.init({ 12 | server: "./examples" 13 | }); 14 | 15 | gulp.watch("./examples/scss/**/*.scss", ['sass']); 16 | gulp.watch("./examples/*.html").on('change', browserSync.reload); 17 | }); 18 | 19 | // Compile sass into CSS & auto-inject into browsers 20 | gulp.task('sass', function() { 21 | return gulp.src("./examples/scss/**/*.scss") 22 | .pipe(plumber({ 23 | errorHandler: function(error) { 24 | console.log(error.message); 25 | this.emit('end'); 26 | } 27 | })) 28 | .pipe(sass()) 29 | .pipe(plumber.stop()) 30 | .pipe(gulp.dest("examples")) 31 | .pipe(browserSync.stream()); 32 | }); 33 | 34 | gulp.task('default', ['serve']); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 MatejKustec 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/loaders/_loader10.scss: -------------------------------------------------------------------------------- 1 | @mixin loader10( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $duration: $loader-animation-duration, 5 | $gap: $loader-gap, 6 | $align: null 7 | ) { 8 | $unique-name: unique-id(); 9 | width: $size; 10 | height: $size; 11 | border-radius: 50%; 12 | position: relative; 13 | animation: #{'loader10-'}#{$unique-name} $duration ease alternate infinite; 14 | animation-delay: math.div($duration, 5) * 2; 15 | 16 | &::after, 17 | &::before { 18 | content: ''; 19 | position: absolute; 20 | width: $size; 21 | height: $size; 22 | border-radius: 50%; 23 | animation: #{'loader10-'}#{$unique-name} $duration ease alternate infinite; 24 | } 25 | 26 | &::before { 27 | left: -($size + $gap); 28 | animation-delay: math.div($duration, 5) * 1; 29 | } 30 | 31 | &::after { 32 | right: -($size + $gap); 33 | animation-delay: math.div($duration, 5) * 3; 34 | } 35 | 36 | @if ($align == center) { 37 | margin-left: auto; 38 | margin-right: auto; 39 | } 40 | 41 | @if ($align == middle) { 42 | top: 50%; 43 | margin: -($size + math.div($size, 2)) auto 0; 44 | } 45 | @else { 46 | top: -$size; 47 | } 48 | 49 | @keyframes #{'loader10-'}#{$unique-name} { 50 | 0% { 51 | box-shadow: 0 $size 0 (-$size) $color; 52 | } 53 | 54 | 100% { 55 | box-shadow: 0 $size 0 $color; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/loaders/_loader01.scss: -------------------------------------------------------------------------------- 1 | @function circle-position($size, $border-size, $coordinate) { 2 | $center: math.div($size, 2) - $border-size - math.div($border-size, 2); 3 | $half-size-border: math.div($size, 2) - $border-size + math.div($border-size, 2); 4 | // root value sqrt(2)/2 = 0.70710678118 5 | $root: 0.70710678118; 6 | @if $coordinate == y { 7 | @return round($center - ($half-size-border * $root)); 8 | } @else { 9 | @return round($center + ($half-size-border * $root)); 10 | } 11 | } 12 | 13 | @mixin loader01( 14 | $size: $loader-size, 15 | $color: $loader-color, 16 | $border-size: $loader-border-size, 17 | $duration: $loader-animation-duration, 18 | $align: null 19 | ) { 20 | width: $size; 21 | height: $size; 22 | border: $border-size solid $color; 23 | border-right-color: transparent; 24 | border-radius: 50%; 25 | position: relative; 26 | animation: loader-rotate $duration linear infinite; 27 | @if ($align == center) { 28 | margin: 0 auto; 29 | } 30 | @if ($align == middle) { 31 | top: 50%; 32 | margin: -(math.div($size, 2)) auto 0; 33 | } 34 | 35 | &::after { 36 | content: ''; 37 | width: $border-size; 38 | height: $border-size; 39 | background: $color; 40 | border-radius: 50%; 41 | position: absolute; 42 | top: circle-position($size, $border-size, y); 43 | left: circle-position($size, $border-size, x); 44 | } 45 | 46 | @include loader-rotate; 47 | } 48 | -------------------------------------------------------------------------------- /src/loaders/_loader09.scss: -------------------------------------------------------------------------------- 1 | @mixin loader09( 2 | $size: $loader-size, 3 | $height: $loader-height, 4 | $color: $loader-color, 5 | $duration: $loader-animation-duration, 6 | $gap: $loader-gap, 7 | $align: null 8 | ) { 9 | $unique-name: unique-id(); 10 | width: $size; 11 | height: $height; 12 | background: $color; 13 | position: relative; 14 | animation: #{'loader09-'}#{$unique-name} $duration ease-in-out infinite; 15 | animation-delay: math.div($duration, 5) * 2; 16 | 17 | &::after, 18 | &::before { 19 | content: ''; 20 | position: absolute; 21 | width: $size; 22 | height: $height; 23 | background: $color; 24 | animation: #{'loader09-'}#{$unique-name} $duration ease-in-out infinite; 25 | } 26 | 27 | &::before { 28 | right: $size + $gap; 29 | animation-delay: math.div($duration, 5) * 1; 30 | } 31 | 32 | &::after { 33 | left: $size + $gap; 34 | animation-delay: math.div($duration, 5) * 3; 35 | } 36 | 37 | @if ($align == center) { 38 | margin: 0 auto; 39 | } 40 | 41 | @if ($align == middle) { 42 | top: 50%; 43 | margin: -($size * 2 + $gap) auto 0; 44 | } 45 | 46 | @keyframes #{'loader09-'}#{$unique-name} { 47 | 0%, 100% { 48 | box-shadow: 0 0 0 $color, 49 | 0 0 0 $color; 50 | } 51 | 52 | 50% { 53 | box-shadow: 0 (-$gap) 0 $color, 54 | 0 $gap 0 $color; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/loaders/_loader06.scss: -------------------------------------------------------------------------------- 1 | @mixin loader06( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $border-size: $loader-border-size, 5 | $duration: $loader-animation-duration, 6 | $align: null 7 | ) { 8 | width: $size; 9 | height: $size; 10 | border: $border-size solid transparent; 11 | border-radius: 50%; 12 | position: relative; 13 | 14 | &::before { 15 | content: ''; 16 | border: $border-size solid rgba($color, 0.5); 17 | border-radius: 50%; 18 | width: $size * 1.2; 19 | height: $size * 1.2; 20 | position: absolute; 21 | top: -(math.div(($size * 1.2), 2)) + (math.div($size, 2)) - $border-size; 22 | left: -(math.div(($size * 1.2), 2)) + (math.div($size, 2)) - $border-size; 23 | animation: loader-scale $duration ease-out infinite; 24 | animation-delay: $duration; 25 | opacity: 0; 26 | } 27 | 28 | &::after { 29 | content: ''; 30 | border: $border-size solid $color; 31 | border-radius: 50%; 32 | width: $size; 33 | height: $size; 34 | position: absolute; 35 | top: -$border-size; 36 | left: -$border-size; 37 | animation: loader-scale $duration ease-out infinite; 38 | animation-delay: math.div($duration, 2); 39 | } 40 | 41 | @if ($align == center) { 42 | margin: 0 auto; 43 | } 44 | 45 | @if ($align == middle) { 46 | top: 50%; 47 | margin: -(math.div($size, 2)) auto 0; 48 | } 49 | 50 | @include loader-scale; 51 | } 52 | -------------------------------------------------------------------------------- /src/loaders/_loader11.scss: -------------------------------------------------------------------------------- 1 | @mixin loader11( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $duration: $loader-animation-duration, 5 | $gap: $loader-gap, 6 | $align: null 7 | ) { 8 | $unique-name: unique-id(); 9 | width: $size; 10 | height: $size; 11 | border-radius: 50%; 12 | box-shadow: 0 $size * 2 0 $color; 13 | position: relative; 14 | animation: #{'loader11-'}#{$unique-name} $duration ease-in-out alternate infinite; 15 | animation-delay: math.div($duration, 5) * 2; 16 | 17 | &::after, 18 | &::before { 19 | content: ''; 20 | position: absolute; 21 | width: $size; 22 | height: $size; 23 | border-radius: 50%; 24 | box-shadow: 0 $size * 2 0 $color; 25 | animation: #{'loader11-'}#{$unique-name} $duration ease-in-out alternate infinite; 26 | } 27 | 28 | &::before { 29 | left: -($size + $gap); 30 | animation-delay: math.div($duration, 5) * 3; 31 | 32 | } 33 | 34 | &::after { 35 | right: -($size + $gap); 36 | animation-delay: math.div($duration, 5) * 1; 37 | } 38 | 39 | @if ($align == center) { 40 | margin-left: auto; 41 | margin-right: auto; 42 | } 43 | @if ($align == middle) { 44 | top: 50%; 45 | margin: -($size * 2 + $size / 2) auto 0; 46 | } @else { 47 | top: -$size * 2; 48 | } 49 | @keyframes #{'loader11-'}#{$unique-name} { 50 | 0% { 51 | box-shadow: 0 $size * 2 0 $color; 52 | } 53 | 54 | 100% { 55 | box-shadow: 0 $size 0 $color; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SpinThatShit 5 | 6 | 7 | 8 |
9 |
10 |
01
11 |
12 |
13 | 14 |
15 |
02
16 |
17 |
18 | 19 |
20 |
03
21 |
22 |
23 | 24 |
25 |
04
26 |
27 |
28 | 29 |
30 |
05
31 |
32 |
33 | 34 |
35 |
06
36 |
37 |
38 | 39 |
40 |
07
41 |
42 |
43 | 44 |
45 |
08
46 |
47 |
48 | 49 |
50 |
09
51 |
52 |
53 | 54 |
55 |
10
56 |
57 |
58 | 59 |
60 |
11
61 |
62 |
63 | 64 |
65 |
12
66 |
67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /examples/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import './src/loaders'; 2 | 3 | $blue: #0052ec; 4 | 5 | html { 6 | box-sizing: border-box; 7 | } 8 | 9 | *, 10 | *::before, 11 | *::after { 12 | box-sizing: inherit; 13 | } 14 | 15 | body { 16 | padding: 0; 17 | margin: 0; 18 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 19 | } 20 | 21 | .container { 22 | display: flex; 23 | flex-flow: row wrap; 24 | justify-content: space-around; 25 | } 26 | 27 | .item { 28 | width: 280px; 29 | height: 280px; 30 | margin: 20px; 31 | background: lighten($blue, 52%); 32 | border-radius: 3px; 33 | position: relative; 34 | } 35 | 36 | .number { 37 | position: absolute; 38 | top: 16px; 39 | right: 16px; 40 | color: lighten($blue, 42%); 41 | font-size: 30px; 42 | } 43 | 44 | .loader01 { 45 | @include loader01($align: middle); 46 | } 47 | 48 | .loader02 { 49 | @include loader02($align: middle); 50 | } 51 | 52 | .loader03 { 53 | @include loader03($align: middle); 54 | } 55 | 56 | .loader04 { 57 | @include loader04($size: 56px, $border-size: 2px, $align: middle); 58 | } 59 | 60 | .loader05 { 61 | @include loader05($border-size: 4px, $align: middle); 62 | } 63 | 64 | .loader06 { 65 | @include loader06($size: 56px, $border-size: 4px, $align: middle); 66 | } 67 | 68 | .loader07 { 69 | @include loader07($size: 16px, $align: middle); 70 | } 71 | 72 | .loader08 { 73 | @include loader08($size: 20px, $gap: 6px, $align: middle); 74 | } 75 | 76 | .loader09 { 77 | @include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle); 78 | } 79 | 80 | .loader10 { 81 | @include loader10($size: 28px, $gap: 12px, $duration: 0.9s, $align: middle); 82 | } 83 | 84 | .loader11 { 85 | @include loader11($size: 20px, $gap: 10px, $duration: 0.8s, $align: middle); 86 | } 87 | 88 | .loader12 { 89 | @include loader12($size: 20px, $gap: 30px, $duration: 1s, $align: middle); 90 | } 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ⚠️ THIS REPO IS DEPRECATED ⚠️ 2 | 3 | # SpinThatShit 4 | A set of SCSS mixins for single element loaders and spinners 5 | 6 | [View examples](https://matejkustec.github.io/SpinThatShit/) 7 | 8 | ## Getting started 9 | 10 | 11 | ``` 12 | npm install spinthatshit 13 | ``` 14 | ``` 15 | bower install SpinThatShit 16 | ``` 17 | 18 | OR 19 | 20 | * Clone or download repo 21 | * Include `src` folder to your project 22 | 23 | 24 | 25 | ## Usage 26 | 27 | Create a div with your custom loader class name: 28 | 29 | ```html 30 |
31 | ``` 32 | 33 | In your custom class name include a mixin of a loader. All loaders are ordered by number, so you will have to take a look in examples folder for your loader number. 34 | 35 | ```scss 36 | .your-loader { 37 | @include loader01; 38 | } 39 | ``` 40 | 41 | In `_variables.scss` there are default settings for loaders 42 | 43 | ```scss 44 | $loader-color: #0052ec; 45 | $loader-size: 56px; 46 | $loader-height: 20px; 47 | $loader-border-size: 8px; 48 | $loader-gap: 12px; 49 | $loader-animation-duration: 1s; 50 | ``` 51 | 52 | But you can also change these default settings, while your're including loader 53 | 54 | ```scss 55 | @include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle); 56 | ``` 57 | 58 | All loaders can be also aligned to center, while including loader with parameter `$align`, 59 | `$align: center` is just for x axis, `$align: middle` is for both axis. 60 | 61 | **PARAMETERS** 62 | 63 | Parameter | Type | Default value 64 | ------------ | ------------- | ------------- 65 | $size | Number | $loader-size 66 | $height | Number | $loader-height 67 | $border-size | Number | $loader-border-size 68 | $color | Color | $loader-color 69 | $duration | Time | $loader-animation-duration 70 | $gap | Number | $loader-gap 71 | $align | Keyword | null 72 | 73 | **NOTE**: Some loaders may not need `$height` and `$gap` parameters. 74 | 75 | ## Performance issues 76 | 77 | Some loaders which are using `box-shadow` for animation may be causing high cpu usage and lag, I'll need to look into more details and fix it, if it's possible. 78 | 79 | 80 | ## Contributing 81 | 82 | If you have some new idea for loader/spinner or you want to fix loader just let me know. 83 | -------------------------------------------------------------------------------- /src/loaders/_loader12.scss: -------------------------------------------------------------------------------- 1 | @mixin loader12( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $duration: $loader-animation-duration, 5 | $gap: $loader-gap, 6 | $align: null 7 | ) { 8 | $unique-name: unique-id(); 9 | width: $size; 10 | height: $size; 11 | border-radius: 50%; 12 | position: relative; 13 | animation: #{'loader12-'}#{$unique-name} $duration linear alternate infinite; 14 | 15 | @if ($align == center) { 16 | top: -$size * 2; 17 | margin-left: auto; 18 | margin-right: auto; 19 | } 20 | 21 | @if ($align == middle) { 22 | top: 50%; 23 | margin: -($size * 2 + math.div($size / 2)) auto 0; 24 | } 25 | @else { 26 | top: -$size * 2; 27 | } 28 | 29 | @keyframes #{'loader12-'}#{$unique-name} { 30 | 0% { 31 | box-shadow: ((- $gap) * 2) $size * 2 0 2px $color, 32 | (- $gap) $size * 2 0 0 rgba($color, 0.2), 33 | 0 ($size * 2) 0 0 rgba($color, 0.2), 34 | ($gap) ($size * 2) 0 0 rgba($color, 0.2), 35 | ($gap * 2) ($size * 2) 0 0 rgba($color, 0.2); 36 | } 37 | 38 | 25% { 39 | box-shadow: ((- $gap) * 2) ($size * 2) 0 0 rgba($color, 0.2), 40 | (- $gap) ($size * 2) 0 2px $color, 41 | 0 ($size * 2) 0 0 rgba($color, 0.2), 42 | ($gap) ($size * 2) 0 0 rgba($color, 0.2), 43 | ($gap * 2) ($size * 2) 0 0 rgba($color, 0.2); 44 | } 45 | 46 | 50% { 47 | box-shadow: ((- $gap) * 2) ($size * 2) 0 0 rgba($color, 0.2), 48 | (- $gap) ($size * 2) 0 0 rgba($color, 0.2), 49 | 0 ($size * 2) 0 2px $color, 50 | ($gap) ($size * 2) 0 0 rgba($color, 0.2), 51 | ($gap * 2) ($size * 2) 0 0 rgba($color, 0.2); 52 | } 53 | 54 | 75% { 55 | box-shadow: ((- $gap) * 2) ($size * 2) 0 0 rgba($color, 0.2), 56 | (- $gap) ($size * 2) 0 0 rgba($color, 0.2), 57 | 0 ($size * 2) 0 0 rgba($color, 0.2), 58 | ($gap) ($size * 2) 0 2px $color, 59 | ($gap * 2) ($size * 2) 0 0 rgba($color, 0.2); 60 | } 61 | 62 | 100% { 63 | box-shadow: ((- $gap) * 2) ($size * 2) 0 0 rgba($color, 0.2), 64 | (- $gap) ($size * 2) 0 0 rgba($color, 0.2), 65 | 0 ($size * 2) 0 0 rgba($color, 0.2), 66 | ($gap) ($size * 2) 0 0 rgba($color, 0.2), 67 | ($gap * 2) ($size * 2) 0 2px $color; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/loaders/_loader08.scss: -------------------------------------------------------------------------------- 1 | @mixin loader08( 2 | $size: $loader-size, 3 | $color: $loader-color, 4 | $duration: $loader-animation-duration, 5 | $gap: $loader-gap, 6 | $align: null 7 | ) { 8 | $unique-name: unique-id(); 9 | width: $size; 10 | height: $size; 11 | position: relative; 12 | animation: #{'loader08-'}#{$unique-name} $duration ease infinite; 13 | 14 | @if ($align == center) { 15 | margin: 0 auto; 16 | } 17 | 18 | @if ($align == middle) { 19 | top: 50%; 20 | margin: -($size * 2 + $gap) auto 0; 21 | } 22 | 23 | @keyframes #{'loader08-'}#{$unique-name} { 24 | 0%, 100% { 25 | box-shadow: // top left 26 | -(math.div($size, 2) + math.div($gap, 2)) $size 0 $color, 27 | // top right 28 | (math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 29 | // bottom right 30 | (math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2), 31 | // bottom left 32 | -(math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2); 33 | } 34 | 35 | 25% { 36 | box-shadow: // top left 37 | -(math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 38 | // top right 39 | (math.div($size, 2) + math.div($gap, 2)) $size 0 $color, 40 | // bottom right 41 | (math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2), 42 | // bottom left 43 | -(math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2); 44 | } 45 | 46 | 50% { 47 | box-shadow: // top left 48 | -(math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 49 | // top right 50 | (math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 51 | // bottom right 52 | (math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 $color, 53 | // bottom left 54 | -(math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2); 55 | } 56 | 57 | 75% { 58 | box-shadow: // top left 59 | -(math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 60 | // top right 61 | (math.div($size, 2) + math.div($gap, 2)) $size 0 rgba($color, 0.2), 62 | // bottom right 63 | (math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 rgba($color, 0.2), 64 | // bottom left 65 | -(math.div($size, 2) + math.div($gap, 2)) (($size * 2) + $gap) 0 $color; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | linters: 2 | 3 | BangFormat: 4 | enabled: true 5 | space_before_bang: true 6 | space_after_bang: false 7 | 8 | BemDepth: 9 | enabled: true 10 | max_elements: 1 11 | 12 | BorderZero: 13 | enabled: true 14 | convention: zero 15 | 16 | ChainedClasses: 17 | enabled: false 18 | 19 | ColorKeyword: 20 | enabled: true 21 | 22 | ColorVariable: 23 | enabled: false 24 | 25 | Comment: 26 | enabled: false 27 | 28 | DebugStatement: 29 | enabled: true 30 | 31 | DeclarationOrder: 32 | enabled: true 33 | 34 | DisableLinterReason: 35 | enabled: true 36 | 37 | DuplicateProperty: 38 | enabled: false 39 | 40 | ElsePlacement: 41 | enabled: true 42 | style: same_line 43 | 44 | EmptyLineBetweenBlocks: 45 | enabled: true 46 | ignore_single_line_blocks: true 47 | 48 | EmptyRule: 49 | enabled: true 50 | 51 | ExtendDirective: 52 | enabled: false 53 | 54 | FinalNewline: 55 | enabled: true 56 | present: true 57 | 58 | HexLength: 59 | enabled: true 60 | style: short 61 | 62 | HexNotation: 63 | enabled: true 64 | style: lowercase 65 | 66 | HexValidation: 67 | enabled: true 68 | 69 | IdSelector: 70 | enabled: true 71 | 72 | ImportantRule: 73 | enabled: false 74 | 75 | ImportPath: 76 | enabled: true 77 | leading_underscore: false 78 | filename_extension: false 79 | 80 | Indentation: 81 | enabled: true 82 | allow_non_nested_indentation: true 83 | character: space 84 | width: 2 85 | 86 | LeadingZero: 87 | enabled: true 88 | style: include_zero 89 | 90 | MergeableSelector: 91 | enabled: false 92 | force_nesting: false 93 | 94 | NameFormat: 95 | enabled: true 96 | convention: hyphenated_lowercase 97 | allow_leading_underscore: true 98 | 99 | NestingDepth: 100 | enabled: true 101 | max_depth: 1 102 | 103 | PlaceholderInExtend: 104 | enabled: true 105 | 106 | PrivateNamingConvention: 107 | enabled: true 108 | prefix: _ 109 | 110 | PropertyCount: 111 | enabled: false 112 | 113 | PropertySortOrder: 114 | enabled: false 115 | 116 | PropertySpelling: 117 | enabled: true 118 | extra_properties: [] 119 | 120 | PropertyUnits: 121 | enabled: false 122 | 123 | PseudoElement: 124 | enabled: true 125 | 126 | QualifyingElement: 127 | enabled: true 128 | allow_element_with_attribute: false 129 | allow_element_with_class: false 130 | allow_element_with_id: false 131 | 132 | SelectorDepth: 133 | enabled: true 134 | max_depth: 3 135 | 136 | SelectorFormat: 137 | enabled: true 138 | convention: 'hyphenated_BEM' 139 | 140 | Shorthand: 141 | enabled: true 142 | 143 | SingleLinePerProperty: 144 | enabled: true 145 | allow_single_line_rule_sets: false 146 | 147 | SingleLinePerSelector: 148 | enabled: true 149 | 150 | SpaceAfterComma: 151 | enabled: true 152 | 153 | SpaceAfterPropertyColon: 154 | enabled: true 155 | style: one_space 156 | 157 | SpaceAfterPropertyName: 158 | enabled: true 159 | 160 | SpaceAfterVariableColon: 161 | enabled: true 162 | style: at_least_one_space 163 | 164 | SpaceAfterVariableName: 165 | enabled: true 166 | 167 | SpaceAroundOperator: 168 | enabled: true 169 | style: one_space 170 | 171 | SpaceBeforeBrace: 172 | enabled: true 173 | style: space 174 | allow_single_line_padding: true 175 | 176 | SpaceBetweenParens: 177 | enabled: true 178 | spaces: 0 179 | 180 | StringQuotes: 181 | enabled: true 182 | style: single_quotes 183 | 184 | TrailingSemicolon: 185 | enabled: true 186 | 187 | TrailingZero: 188 | enabled: true 189 | 190 | TransitionAll: 191 | enabled: false 192 | 193 | UnnecessaryMantissa: 194 | enabled: true 195 | 196 | UnnecessaryParentReference: 197 | enabled: true 198 | 199 | UrlFormat: 200 | enabled: false 201 | 202 | UrlQuotes: 203 | enabled: true 204 | 205 | VariableForProperty: 206 | enabled: false 207 | 208 | VendorPrefixes: 209 | enabled: true 210 | identifier_list: base 211 | include: [] 212 | exclude: [] 213 | 214 | ZeroUnit: 215 | enabled: true 216 | -------------------------------------------------------------------------------- /src/loaders/_loader07.scss: -------------------------------------------------------------------------------- 1 | @function circle-angle($size) { 2 | @return round($size * 0.70710678118) + math.div($size, 2); 3 | } 4 | 5 | @function circle-normal($size) { 6 | @return round($size * 0.70710678118) + $size; 7 | } 8 | 9 | @mixin loader07( 10 | $size: $loader-size, 11 | $color: $loader-color, 12 | $duration: $loader-animation-duration, 13 | $align: null 14 | ) { 15 | $unique-name: unique-id(); 16 | $dot-color: rgba($color, 0.05), rgba($color, 0.1), rgba($color, 0.2), rgba($color, 0.3), rgba($color, 0.4), rgba($color, 0.6), rgba($color, 0.8), rgba($color, 1); 17 | width: $size; 18 | height: $size; 19 | border-radius: 50%; 20 | position: relative; 21 | animation: #{'loader07-'}#{$unique-name} $duration linear infinite; 22 | 23 | @if ($align == center) { 24 | margin: 0 auto; 25 | } 26 | 27 | @if ($align == middle) { 28 | top: 50%; 29 | margin: -(math.div($size, 2)) auto 0; 30 | } 31 | 32 | @keyframes #{'loader07-'}#{$unique-name} { 33 | 0% { 34 | box-shadow: // Top 35 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 1), 36 | // Top Right 37 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 2), 38 | // Right 39 | circle-normal($size) 0 0 0 nth($dot-color, 3), 40 | // Bottom right 41 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 4), 42 | // Bottom 43 | 0 circle-normal($size) 0 0 nth($dot-color, 5), 44 | // Bottom Left 45 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 6), 46 | // Left 47 | (- circle-normal($size)) 0 0 0 nth($dot-color, 7), 48 | // Top left 49 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 8); 50 | } 51 | 52 | 12.5% { 53 | box-shadow: // Top 54 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 8), 55 | // Top Right 56 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 1), 57 | // Right 58 | circle-normal($size) 0 0 0 nth($dot-color, 2), 59 | // Bottom right 60 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 3), 61 | // Bottom 62 | 0 circle-normal($size) 0 0 nth($dot-color, 4), 63 | // Bottom Left 64 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 5), 65 | // Left 66 | (- circle-normal($size)) 0 0 0 nth($dot-color, 6), 67 | // Top left 68 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 7); 69 | } 70 | 71 | 25% { 72 | box-shadow: // Top 73 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 7), 74 | // Top Right 75 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 8), 76 | // Right 77 | circle-normal($size) 0 0 0 nth($dot-color, 1), 78 | // Bottom right 79 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 2), 80 | // Bottom 81 | 0 circle-normal($size) 0 0 nth($dot-color, 3), 82 | // Bottom Left 83 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 4), 84 | // Left 85 | (- circle-normal($size)) 0 0 0 nth($dot-color, 5), 86 | // Top left 87 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 6); 88 | } 89 | 90 | 37.5% { 91 | box-shadow: // Top 92 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 6), 93 | // Top Right 94 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 7), 95 | // Right 96 | circle-normal($size) 0 0 0 nth($dot-color, 8), 97 | // Bottom right 98 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 1), 99 | // Bottom 100 | 0 circle-normal($size) 0 0 nth($dot-color, 2), 101 | // Bottom Left 102 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 3), 103 | // Left 104 | (- circle-normal($size)) 0 0 0 nth($dot-color, 4), 105 | // Top left 106 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 5); 107 | } 108 | 109 | 50% { 110 | box-shadow: // Top 111 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 5), 112 | // Top Right 113 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 6), 114 | // Right 115 | circle-normal($size) 0 0 0 nth($dot-color, 7), 116 | // Bottom right 117 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 8), 118 | // Bottom 119 | 0 circle-normal($size) 0 0 nth($dot-color, 1), 120 | // Bottom Left 121 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 2), 122 | // Left 123 | (- circle-normal($size)) 0 0 0 nth($dot-color, 3), 124 | // Top left 125 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 4); 126 | } 127 | 128 | 62.5% { 129 | box-shadow: // Top 130 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 4), 131 | // Top Right 132 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 5), 133 | // Right 134 | circle-normal($size) 0 0 0 nth($dot-color, 6), 135 | // Bottom right 136 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 7), 137 | // Bottom 138 | 0 circle-normal($size) 0 0 nth($dot-color, 8), 139 | // Bottom Left 140 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 1), 141 | // Left 142 | (- circle-normal($size)) 0 0 0 nth($dot-color, 2), 143 | // Top left 144 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 3); 145 | } 146 | 147 | 75% { 148 | box-shadow: // Top 149 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 3), 150 | // Top Right 151 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 4), 152 | // Right 153 | circle-normal($size) 0 0 0 nth($dot-color, 5), 154 | // Bottom right 155 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 6), 156 | // Bottom 157 | 0 circle-normal($size) 0 0 nth($dot-color, 7), 158 | // Bottom Lefts 159 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 8), 160 | // Left 161 | (- circle-normal($size)) 0 0 0 nth($dot-color, 1), 162 | // Top left 163 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 2); 164 | } 165 | 166 | 87.5% { 167 | box-shadow: // Top 168 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 2), 169 | // Top Right 170 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 3), 171 | // Right 172 | circle-normal($size) 0 0 0 nth($dot-color, 4), 173 | // Bottom right 174 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 5), 175 | // Bottom 176 | 0 circle-normal($size) 0 0 nth($dot-color, 6), 177 | // Bottom Left 178 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 7), 179 | // Left 180 | (- circle-normal($size)) 0 0 0 nth($dot-color, 8), 181 | // Top left 182 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 1); 183 | } 184 | 185 | 100% { 186 | box-shadow: // Top 187 | 0 (- circle-normal($size)) 0 0 nth($dot-color, 1), 188 | // Top Right 189 | circle-angle($size) (- circle-angle($size)) 0 0 nth($dot-color, 2), 190 | // Right 191 | circle-normal($size) 0 0 0 nth($dot-color, 3), 192 | // Bottom right 193 | circle-angle($size) circle-angle($size) 0 0 nth($dot-color, 4), 194 | // Bottom 195 | 0 circle-normal($size) 0 0 nth($dot-color, 5), 196 | // Bottom Left 197 | (- circle-angle($size)) circle-angle($size) 0 0 nth($dot-color, 6), 198 | // Left 199 | (- circle-normal($size)) 0 0 0 nth($dot-color, 7), 200 | // Top left 201 | (- circle-angle($size)) (- circle-angle($size)) 0 0 nth($dot-color, 8); 202 | } 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /examples/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; } 3 | 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: inherit; } 8 | 9 | body { 10 | padding: 0; 11 | margin: 0; 12 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } 13 | 14 | .container { 15 | display: flex; 16 | flex-flow: row wrap; 17 | justify-content: space-around; } 18 | 19 | .item { 20 | width: 280px; 21 | height: 280px; 22 | margin: 20px; 23 | background: #f6f9ff; 24 | border-radius: 3px; 25 | position: relative; } 26 | 27 | .number { 28 | position: absolute; 29 | top: 16px; 30 | right: 16px; 31 | color: #c3d8ff; 32 | font-size: 30px; } 33 | 34 | .loader01 { 35 | width: 56px; 36 | height: 56px; 37 | border: 8px solid #0052ec; 38 | border-right-color: transparent; 39 | border-radius: 50%; 40 | position: relative; 41 | animation: loader-rotate 1s linear infinite; 42 | top: 50%; 43 | margin: -28px auto 0; } 44 | .loader01::after { 45 | content: ''; 46 | width: 8px; 47 | height: 8px; 48 | background: #0052ec; 49 | border-radius: 50%; 50 | position: absolute; 51 | top: -1px; 52 | left: 33px; } 53 | 54 | @keyframes loader-rotate { 55 | 0% { 56 | transform: rotate(0); } 57 | 100% { 58 | transform: rotate(360deg); } } 59 | 60 | .loader02 { 61 | width: 56px; 62 | height: 56px; 63 | border: 8px solid rgba(0, 82, 236, 0.25); 64 | border-top-color: #0052ec; 65 | border-radius: 50%; 66 | position: relative; 67 | animation: loader-rotate 1s linear infinite; 68 | top: 50%; 69 | margin: -28px auto 0; } 70 | 71 | @keyframes loader-rotate { 72 | 0% { 73 | transform: rotate(0); } 74 | 100% { 75 | transform: rotate(360deg); } } 76 | 77 | .loader03 { 78 | width: 56px; 79 | height: 56px; 80 | border: 8px solid transparent; 81 | border-top-color: #0052ec; 82 | border-bottom-color: #0052ec; 83 | border-radius: 50%; 84 | position: relative; 85 | animation: loader-rotate 1s linear infinite; 86 | top: 50%; 87 | margin: -28px auto 0; } 88 | 89 | @keyframes loader-rotate { 90 | 0% { 91 | transform: rotate(0); } 92 | 100% { 93 | transform: rotate(360deg); } } 94 | 95 | .loader04 { 96 | width: 56px; 97 | height: 56px; 98 | border: 2px solid rgba(0, 82, 236, 0.5); 99 | border-radius: 50%; 100 | position: relative; 101 | animation: loader-rotate 1s ease-in-out infinite; 102 | top: 50%; 103 | margin: -28px auto 0; } 104 | .loader04::after { 105 | content: ''; 106 | width: 10px; 107 | height: 10px; 108 | border-radius: 50%; 109 | background: #0052ec; 110 | position: absolute; 111 | top: -6px; 112 | left: 50%; 113 | margin-left: -5px; } 114 | 115 | @keyframes loader-rotate { 116 | 0% { 117 | transform: rotate(0); } 118 | 100% { 119 | transform: rotate(360deg); } } 120 | 121 | .loader05 { 122 | width: 56px; 123 | height: 56px; 124 | border: 4px solid #0052ec; 125 | border-radius: 50%; 126 | position: relative; 127 | animation: loader-scale 1s ease-out infinite; 128 | top: 50%; 129 | margin: -28px auto 0; } 130 | 131 | @keyframes loader-scale { 132 | 0% { 133 | transform: scale(0); 134 | opacity: 0; } 135 | 50% { 136 | opacity: 1; } 137 | 100% { 138 | transform: scale(1); 139 | opacity: 0; } } 140 | 141 | .loader06 { 142 | width: 56px; 143 | height: 56px; 144 | border: 4px solid transparent; 145 | border-radius: 50%; 146 | position: relative; 147 | top: 50%; 148 | margin: -28px auto 0; } 149 | .loader06::before { 150 | content: ''; 151 | border: 4px solid rgba(0, 82, 236, 0.5); 152 | border-radius: 50%; 153 | width: 67.2px; 154 | height: 67.2px; 155 | position: absolute; 156 | top: -9.6px; 157 | left: -9.6px; 158 | animation: loader-scale 1s ease-out infinite; 159 | animation-delay: 1s; 160 | opacity: 0; } 161 | .loader06::after { 162 | content: ''; 163 | border: 4px solid #0052ec; 164 | border-radius: 50%; 165 | width: 56px; 166 | height: 56px; 167 | position: absolute; 168 | top: -4px; 169 | left: -4px; 170 | animation: loader-scale 1s ease-out infinite; 171 | animation-delay: 0.5s; } 172 | 173 | @keyframes loader-scale { 174 | 0% { 175 | transform: scale(0); 176 | opacity: 0; } 177 | 50% { 178 | opacity: 1; } 179 | 100% { 180 | transform: scale(1); 181 | opacity: 0; } } 182 | 183 | .loader07 { 184 | width: 16px; 185 | height: 16px; 186 | border-radius: 50%; 187 | position: relative; 188 | animation: loader07-u04c322d6 1s linear infinite; 189 | top: 50%; 190 | margin: -8px auto 0; } 191 | 192 | @keyframes loader07-u04c322d6 { 193 | 0% { 194 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.05), 19px -19px 0 0 rgba(0, 82, 236, 0.1), 27px 0 0 0 rgba(0, 82, 236, 0.2), 19px 19px 0 0 rgba(0, 82, 236, 0.3), 0 27px 0 0 rgba(0, 82, 236, 0.4), -19px 19px 0 0 rgba(0, 82, 236, 0.6), -27px 0 0 0 rgba(0, 82, 236, 0.8), -19px -19px 0 0 #0052ec; } 195 | 12.5% { 196 | box-shadow: 0 -27px 0 0 #0052ec, 19px -19px 0 0 rgba(0, 82, 236, 0.05), 27px 0 0 0 rgba(0, 82, 236, 0.1), 19px 19px 0 0 rgba(0, 82, 236, 0.2), 0 27px 0 0 rgba(0, 82, 236, 0.3), -19px 19px 0 0 rgba(0, 82, 236, 0.4), -27px 0 0 0 rgba(0, 82, 236, 0.6), -19px -19px 0 0 rgba(0, 82, 236, 0.8); } 197 | 25% { 198 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.8), 19px -19px 0 0 #0052ec, 27px 0 0 0 rgba(0, 82, 236, 0.05), 19px 19px 0 0 rgba(0, 82, 236, 0.1), 0 27px 0 0 rgba(0, 82, 236, 0.2), -19px 19px 0 0 rgba(0, 82, 236, 0.3), -27px 0 0 0 rgba(0, 82, 236, 0.4), -19px -19px 0 0 rgba(0, 82, 236, 0.6); } 199 | 37.5% { 200 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.6), 19px -19px 0 0 rgba(0, 82, 236, 0.8), 27px 0 0 0 #0052ec, 19px 19px 0 0 rgba(0, 82, 236, 0.05), 0 27px 0 0 rgba(0, 82, 236, 0.1), -19px 19px 0 0 rgba(0, 82, 236, 0.2), -27px 0 0 0 rgba(0, 82, 236, 0.3), -19px -19px 0 0 rgba(0, 82, 236, 0.4); } 201 | 50% { 202 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.4), 19px -19px 0 0 rgba(0, 82, 236, 0.6), 27px 0 0 0 rgba(0, 82, 236, 0.8), 19px 19px 0 0 #0052ec, 0 27px 0 0 rgba(0, 82, 236, 0.05), -19px 19px 0 0 rgba(0, 82, 236, 0.1), -27px 0 0 0 rgba(0, 82, 236, 0.2), -19px -19px 0 0 rgba(0, 82, 236, 0.3); } 203 | 62.5% { 204 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.3), 19px -19px 0 0 rgba(0, 82, 236, 0.4), 27px 0 0 0 rgba(0, 82, 236, 0.6), 19px 19px 0 0 rgba(0, 82, 236, 0.8), 0 27px 0 0 #0052ec, -19px 19px 0 0 rgba(0, 82, 236, 0.05), -27px 0 0 0 rgba(0, 82, 236, 0.1), -19px -19px 0 0 rgba(0, 82, 236, 0.2); } 205 | 75% { 206 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.2), 19px -19px 0 0 rgba(0, 82, 236, 0.3), 27px 0 0 0 rgba(0, 82, 236, 0.4), 19px 19px 0 0 rgba(0, 82, 236, 0.6), 0 27px 0 0 rgba(0, 82, 236, 0.8), -19px 19px 0 0 #0052ec, -27px 0 0 0 rgba(0, 82, 236, 0.05), -19px -19px 0 0 rgba(0, 82, 236, 0.1); } 207 | 87.5% { 208 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.1), 19px -19px 0 0 rgba(0, 82, 236, 0.2), 27px 0 0 0 rgba(0, 82, 236, 0.3), 19px 19px 0 0 rgba(0, 82, 236, 0.4), 0 27px 0 0 rgba(0, 82, 236, 0.6), -19px 19px 0 0 rgba(0, 82, 236, 0.8), -27px 0 0 0 #0052ec, -19px -19px 0 0 rgba(0, 82, 236, 0.05); } 209 | 100% { 210 | box-shadow: 0 -27px 0 0 rgba(0, 82, 236, 0.05), 19px -19px 0 0 rgba(0, 82, 236, 0.1), 27px 0 0 0 rgba(0, 82, 236, 0.2), 19px 19px 0 0 rgba(0, 82, 236, 0.3), 0 27px 0 0 rgba(0, 82, 236, 0.4), -19px 19px 0 0 rgba(0, 82, 236, 0.6), -27px 0 0 0 rgba(0, 82, 236, 0.8), -19px -19px 0 0 #0052ec; } } 211 | 212 | .loader08 { 213 | width: 20px; 214 | height: 20px; 215 | position: relative; 216 | animation: loader08-ub06eb63b 1s ease infinite; 217 | top: 50%; 218 | margin: -46px auto 0; } 219 | 220 | @keyframes loader08-ub06eb63b { 221 | 0%, 100% { 222 | box-shadow: -13px 20px 0 #0052ec, 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 rgba(0, 82, 236, 0.2); } 223 | 25% { 224 | box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 #0052ec, 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 rgba(0, 82, 236, 0.2); } 225 | 50% { 226 | box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 #0052ec, -13px 46px 0 rgba(0, 82, 236, 0.2); } 227 | 75% { 228 | box-shadow: -13px 20px 0 rgba(0, 82, 236, 0.2), 13px 20px 0 rgba(0, 82, 236, 0.2), 13px 46px 0 rgba(0, 82, 236, 0.2), -13px 46px 0 #0052ec; } } 229 | 230 | .loader09 { 231 | width: 10px; 232 | height: 48px; 233 | background: #0052ec; 234 | position: relative; 235 | animation: loader09-u3e967ec0 1s ease-in-out infinite; 236 | animation-delay: 0.4s; 237 | top: 50%; 238 | margin: -28px auto 0; } 239 | .loader09::after, .loader09::before { 240 | content: ''; 241 | position: absolute; 242 | width: 10px; 243 | height: 48px; 244 | background: #0052ec; 245 | animation: loader09-u3e967ec0 1s ease-in-out infinite; } 246 | .loader09::before { 247 | right: 18px; 248 | animation-delay: 0.2s; } 249 | .loader09::after { 250 | left: 18px; 251 | animation-delay: 0.6s; } 252 | 253 | @keyframes loader09-u3e967ec0 { 254 | 0%, 100% { 255 | box-shadow: 0 0 0 #0052ec, 0 0 0 #0052ec; } 256 | 50% { 257 | box-shadow: 0 -8px 0 #0052ec, 0 8px 0 #0052ec; } } 258 | 259 | .loader10 { 260 | width: 28px; 261 | height: 28px; 262 | border-radius: 50%; 263 | position: relative; 264 | animation: loader10-uba7e1836 0.9s ease alternate infinite; 265 | animation-delay: 0.36s; 266 | top: 50%; 267 | margin: -42px auto 0; } 268 | .loader10::after, .loader10::before { 269 | content: ''; 270 | position: absolute; 271 | width: 28px; 272 | height: 28px; 273 | border-radius: 50%; 274 | animation: loader10-uba7e1836 0.9s ease alternate infinite; } 275 | .loader10::before { 276 | left: -40px; 277 | animation-delay: 0.18s; } 278 | .loader10::after { 279 | right: -40px; 280 | animation-delay: 0.54s; } 281 | 282 | @keyframes loader10-uba7e1836 { 283 | 0% { 284 | box-shadow: 0 28px 0 -28px #0052ec; } 285 | 100% { 286 | box-shadow: 0 28px 0 #0052ec; } } 287 | 288 | .loader11 { 289 | width: 20px; 290 | height: 20px; 291 | border-radius: 50%; 292 | box-shadow: 0 40px 0 #0052ec; 293 | position: relative; 294 | animation: loader11-u7f16642c 0.8s ease-in-out alternate infinite; 295 | animation-delay: 0.32s; 296 | top: 50%; 297 | margin: -50px auto 0; } 298 | .loader11::after, .loader11::before { 299 | content: ''; 300 | position: absolute; 301 | width: 20px; 302 | height: 20px; 303 | border-radius: 50%; 304 | box-shadow: 0 40px 0 #0052ec; 305 | animation: loader11-u7f16642c 0.8s ease-in-out alternate infinite; } 306 | .loader11::before { 307 | left: -30px; 308 | animation-delay: 0.48s; } 309 | .loader11::after { 310 | right: -30px; 311 | animation-delay: 0.16s; } 312 | 313 | @keyframes loader11-u7f16642c { 314 | 0% { 315 | box-shadow: 0 40px 0 #0052ec; } 316 | 100% { 317 | box-shadow: 0 20px 0 #0052ec; } } 318 | 319 | .loader12 { 320 | width: 20px; 321 | height: 20px; 322 | border-radius: 50%; 323 | position: relative; 324 | animation: loader12-u6338d783 1s linear alternate infinite; 325 | top: 50%; 326 | margin: -50px auto 0; } 327 | 328 | @keyframes loader12-u6338d783 { 329 | 0% { 330 | box-shadow: -60px 40px 0 2px #0052ec, -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); } 331 | 25% { 332 | box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 2px #0052ec, 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); } 333 | 50% { 334 | box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 2px #0052ec, 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 0 rgba(0, 82, 236, 0.2); } 335 | 75% { 336 | box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 2px #0052ec, 60px 40px 0 0 rgba(0, 82, 236, 0.2); } 337 | 100% { 338 | box-shadow: -60px 40px 0 0 rgba(0, 82, 236, 0.2), -30px 40px 0 0 rgba(0, 82, 236, 0.2), 0 40px 0 0 rgba(0, 82, 236, 0.2), 30px 40px 0 0 rgba(0, 82, 236, 0.2), 60px 40px 0 2px #0052ec; } } 339 | --------------------------------------------------------------------------------