https://github.com/db1996/Pure-CSS-loaders
https://github.com/db1996/Pure-CSS-loaders
Last synced: 17 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/db1996/Pure-CSS-loaders
- Owner: db1996
- Created: 2017-12-06T11:32:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-31T12:33:56.000Z (about 2 years ago)
- Last Synced: 2024-10-31T04:34:57.893Z (6 months ago)
- Language: CSS
- Size: 231 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-list - Pure-CSS-loaders
README
# Pure-CSS-loaders
A scss project with some pure css loaders and spinners.
* The tricolor one will work without an SVG but will look worse
* The google spinner won't work without SVG. Still working on making one without it, i have one
working but it just doesn't look right
[Here's the codepen to show them](https://codepen.io/db1996/pen/VrNoBJ). Shown with normal CSS
because the file got way too long
## Contents
[Update](#update)
[Mixins](#mixins)
* [wave](#wave)
* [square-wave](#square-wave)
* [dots](#dots)
* [dots-horizontal](#dots-horizontal)
* [google-spinner](#google-spinner)
* [gooey-loader](#gooey-loader)
[Credits](#credits)
## Update
* Added another loader, the windows 10 horizontal dots (moving from left to right)
* All of the loaders now work with Mixins
## Mixins
Note: There's an example with description for all of the mixins in the `_settings.scss` file
### wave
create-wave-elem($c, $am, $w, $max-h, $min-h, $gap, $bcolor, $anim-l)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the
individual waves. If the classname `loading-waves` the HTML should look like this:
`$am`: Amount of `
` elements.
`$w`: The width of each individual `
` element.
`$max-h`: The height each `
` will grow to at max.
`$min-h`: The height each `
` will shrink to at min.
`$gap`: The gap between each `
`.
`$bcolor`: The color of the waves.
`anim-l`: time it takes for each wave to shrink and grow (i cycle)
### square-wave
create-square-wave-elem($c, $am, $w, $h, $g, $bcol, $al, $jdy, $jdx, $mop)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the
individual waves. If the classname `loading-square-waves` the HTML should look like this:
`$am`: Amount of `
` elements.
`$w`: The width of each individual `
` element.
`$h`: The height of each individual `
` element.
`$gap`: The gap between each `
`.
`$bcol`: The color of the squares.
`al`: The time it takes each square to jump and fall (one cycle)
`jdy`: The distance each square jumps up (or down)
`jdx`: The distance each square jumps right (or left)
`mop`: The minimum opacity of each square, set this to 1 if you don't want any opacity
### dots
create-dots-elem ($c, $am, $s, $cs, $ranim, $bfanim, $bddanim, $col)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the
individual dots. If the classname `loading-dots` the HTML should look like this:
`$am`: Amount of `
` elements.
`$s`: The size of the dots (Width and height is equal and the border-radius is set to 50%).
`$cs`: The circle size. The height and width of space where all the dots go in circles
`$ranim`: Amount of time it takes a dot to animate 2 full circles (the speed up and slow down parts
are calculated)
`bfanim`: Delay in seconds for every dot between every 2 rounds (the time a dot is invisible after
ending 2 rounds)
`bddanim`: Delay in seconds between every dot (the higher, the more distance there will be between 2
dots)
`$col`: The color of the dots
### dots-horizontal
create-horizontal-dots-elem($c, $am, $s, $col, $w, $al, $ad)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the
individual dots. If the classname `loader-horizontal-dots` the HTML should look like this:
`$am`: Amount of `
` elements
`$s`: The size of the dots (Width and height is equal and the border-radius is set to 50%).
`$col`: The color of the dots
`$w`: The width of the **container** element. This is also how far to the right every dot will go
`$al`: Time it takes to go from left to right for each dots
`$ad`: Delay in seconds between every dot (the higher, the more distance there will be between 2
dots)
### google-spinner
create-google-spinner-elem($c, $s, $bw, $r, $g, $b, $y)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper. If the
classname `loading-google-spinner` the HTML should look like this:
`$s`: The size of the circle
`$bw`: The width of the border of the circle (the visible colored part)
`$r, $g, $b, $y`: The colors the circle will change in (red, green, blue, yellow are standard, make
them all the same to have no transition)
### gooey-loader
create-gooey-loader-elem($c, $w, $h, $bcol1, $bcol2, $bcol3, $al, $fcw)
`$c`: classname (string). Whatever classname you use should be the same as the wrapper . If the
classname `loading-gooey` the HTML should look like this:
`$w`: The width of each dot.
`$h`: The height of each dot.
`$bcol1, $bcol2, $bcol3`: The colors of each dot
`$al`: length in seconds of the full animation
`$fcw`: The width of the circle (and height) that all the dots move in
NOTE: The SVG is not needed, but it looks better with it. (it makes the colors morph) NOTE: This one
is the _most_ buggy out of all of them to customize. You can play around with it
### Spinner (2 halves)
@mixin create-spinner-elem($c, $s, $bs, $col, $al, $ad: normal, $s-s: $s - 20px, $s-bs: $bs, $s-col: $col, $s-al: $al, $s-ad: reverse)
Variables here are devided in the big circle and small circle
`$c`: classname (string). Whatever classname you use should be the same the loader element. The
loader is just 1 element using pseudo's if the name "loading-spinner" was used the HTML should look
like this:
`$s`: The size of the big circle
`$bs`: border-size of the big circle
`$col`: Color of the big circle
`$al`: Animation length of the big circles
`$ad`: Animation direction: OPTIONAL. STANDARD: normal (clockwise)
`$s-s`: size of the small circle. OPTIONAL, STANDARD: Big circle size - 20px
`$s-bs`: border size of the small circle. OPTIONAL, STANDARD: Big circle border customize
`$s-col`: Color of the small circle. OPTIONAL, STANDARD: big circle color
`$s-al`: Animation length of the small circle. OPTIONAL, STANDARD: Big circle animation length
`$s-ad`: Animation direction of the small circle. OPTIONAL, STANDARD: Reverse (counter-clockwise)
### border
This one is a bit different. You put this one in a parent container of your choosing, the class does
not matter of the parent, only of the border elements. There's 2 elements both using the `:before`
and `:after`. Together making all 4 sides.
NOTE: Make the parent container `position: relative;`
@mixin create-border-elem($c, $t, $al, $col, $w: 100%, $h: 100%)
`$c`: Classname, this is the base class. if you choose the class `loader-border` you place 2 `div`
items in a parent div of your choosing. The HTML should then look like this:
`$t`: The thickness of the border in px
`$al`: Animation length
`$col`: Color of the borders
`$w`: The width of the parent. OPTIONAL, STANDARD: 100%
`$h`: The height of the parent. OPTIONAL, STANDARD: 100%
NOTE: If the parent has different width from height. Not giving the width and height will result in
strange results. still looking to fix this, but for now width and height needs to be given.
## Credits
Credit for the horizontal dots loader: https://codepen.io/jenning/pen/rrkBbq. I used his
`cubic-bezier` css animation property, that's it
Credit for the gooey loader: https://codepen.io/Izumenko/pen/MpWyXK. I used this and tried to make
it more customizable
Credit for the border animation: https://codepen.io/PicturElements/pen/ZOwkwv. Got the idea here,
thought it looked cool