{"id":13490912,"url":"https://github.com/db1996/Pure-CSS-loaders","last_synced_at":"2025-03-28T07:31:33.132Z","repository":{"id":217434961,"uuid":"113308102","full_name":"db1996/Pure-CSS-loaders","owner":"db1996","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-31T12:33:56.000Z","size":237,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-31T04:34:57.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/db1996.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-06T11:32:04.000Z","updated_at":"2024-05-02T19:05:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"52f96f56-f0b9-4ea5-b9ad-8fc4dc2fbcf1","html_url":"https://github.com/db1996/Pure-CSS-loaders","commit_stats":null,"previous_names":["db1996/pure-css-loaders"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db1996%2FPure-CSS-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db1996%2FPure-CSS-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db1996%2FPure-CSS-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db1996%2FPure-CSS-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/db1996","download_url":"https://codeload.github.com/db1996/Pure-CSS-loaders/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245989125,"owners_count":20705760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:00:52.017Z","updated_at":"2025-03-28T07:31:33.114Z","avatar_url":"https://github.com/db1996.png","language":"CSS","readme":"# Pure-CSS-loaders\n\nA scss project with some pure css loaders and spinners.\n\n* The tricolor one will work without an SVG but will look worse\n* The google spinner won't work without SVG. Still working on making one without it, i have one\n  working but it just doesn't look right\n\n[Here's the codepen to show them](https://codepen.io/db1996/pen/VrNoBJ). Shown with normal CSS\nbecause the file got way too long\n\n## Contents\n\n[Update](#update)\n\n[Mixins](#mixins)\n\n* [wave](#wave)\n* [square-wave](#square-wave)\n* [dots](#dots)\n* [dots-horizontal](#dots-horizontal)\n* [google-spinner](#google-spinner)\n* [gooey-loader](#gooey-loader)\n\n[Credits](#credits)\n\n## Update\n\n* Added another loader, the windows 10 horizontal dots (moving from left to right)\n* All of the loaders now work with Mixins\n\n## Mixins\n\nNote: There's an example with description for all of the mixins in the `_settings.scss` file\n\n### wave\n\n    create-wave-elem($c, $am, $w, $max-h, $min-h, $gap, $bcolor, $anim-l)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the\nindividual waves. If the classname `loading-waves` the HTML should look like this:\n\n    \u003cdiv class=\"loading-waves\"\u003e\n        \u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n`$am`: Amount of `\u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e` elements.\n\n`$w`: The width of each individual `\u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e` element.\n\n`$max-h`: The height each `\u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e` will grow to at max.\n\n`$min-h`: The height each `\u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e` will shrink to at min.\n\n`$gap`: The gap between each `\u003cdiv class=\"loading-waves__wave\"\u003e\u003c/div\u003e`.\n\n`$bcolor`: The color of the waves.\n\n`anim-l`: time it takes for each wave to shrink and grow (i cycle)\n\n### square-wave\n\n    create-square-wave-elem($c, $am, $w, $h, $g, $bcol, $al, $jdy, $jdx, $mop)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the\nindividual waves. If the classname `loading-square-waves` the HTML should look like this:\n\n    \u003cdiv class=\"loading-square-waves\"\u003e\n        \u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n`$am`: Amount of `\u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e` elements.\n\n`$w`: The width of each individual `\u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e` element.\n\n`$h`: The height of each individual `\u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e` element.\n\n`$gap`: The gap between each `\u003cdiv class=\"loading-square-waves__square\"\u003e\u003c/div\u003e`.\n\n`$bcol`: The color of the squares.\n\n`al`: The time it takes each square to jump and fall (one cycle)\n\n`jdy`: The distance each square jumps up (or down)\n\n`jdx`: The distance each square jumps right (or left)\n\n`mop`: The minimum opacity of each square, set this to 1 if you don't want any opacity\n\n### dots\n\n    create-dots-elem ($c, $am, $s, $cs, $ranim, $bfanim, $bddanim, $col)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the\nindividual dots. If the classname `loading-dots` the HTML should look like this:\n\n    \u003cdiv class=\"loading-dots\"\u003e\n        \u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n`$am`: Amount of `\u003cdiv class=\"loading-dots__dot\"\u003e\u003c/div\u003e` elements.\n\n`$s`: The size of the dots (Width and height is equal and the border-radius is set to 50%).\n\n`$cs`: The circle size. The height and width of space where all the dots go in circles\n\n`$ranim`: Amount of time it takes a dot to animate 2 full circles (the speed up and slow down parts\nare calculated)\n\n`bfanim`: Delay in seconds for every dot between every 2 rounds (the time a dot is invisible after\nending 2 rounds)\n\n`bddanim`: Delay in seconds between every dot (the higher, the more distance there will be between 2\ndots)\n\n`$col`: The color of the dots\n\n### dots-horizontal\n\n    create-horizontal-dots-elem($c, $am, $s, $col, $w, $al, $ad)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper of all the\nindividual dots. If the classname `loader-horizontal-dots` the HTML should look like this:\n\n    \u003cdiv class=\"loader-horizontal-dots\"\u003e\n        \u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n`$am`: Amount of `\u003cdiv class=\"loader-horizontal-dots__dot\"\u003e\u003c/div\u003e` elements\n\n`$s`: The size of the dots (Width and height is equal and the border-radius is set to 50%).\n\n`$col`: The color of the dots\n\n`$w`: The width of the **container** element. This is also how far to the right every dot will go\n\n`$al`: Time it takes to go from left to right for each dots\n\n`$ad`: Delay in seconds between every dot (the higher, the more distance there will be between 2\ndots)\n\n### google-spinner\n\n    create-google-spinner-elem($c, $s, $bw, $r, $g, $b, $y)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper. If the\nclassname `loading-google-spinner` the HTML should look like this:\n\n    \u003cdiv class=\"loading-google-spinner\"\u003e\n        \u003csvg class=\"loading-google-spinner__circle-svg\" viewBox=\"25 25 50 50\"\u003e\n            \u003ccircle class=\"loading-google-spinner__circle-stroke\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"2\" stroke-miterlimit=\"10\"/\u003e\n        \u003c/svg\u003e\n    \u003c/div\u003e\n\n`$s`: The size of the circle\n\n`$bw`: The width of the border of the circle (the visible colored part)\n\n`$r, $g, $b, $y`: The colors the circle will change in (red, green, blue, yellow are standard, make\nthem all the same to have no transition)\n\n### gooey-loader\n\n    create-gooey-loader-elem($c, $w, $h, $bcol1, $bcol2, $bcol3, $al, $fcw)\n\n`$c`: classname (string). Whatever classname you use should be the same as the wrapper . If the\nclassname `loading-gooey` the HTML should look like this:\n\n    \u003cdiv class=\"loading-gooey\"\u003e\n        \u003cdiv class=\"loading-gooey__dot loading-gooey__dot--dot3\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-gooey__dot loading-gooey__dot--dot2\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"loading-gooey__dot loading-gooey__dot--dot1\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"\u003e\n        \u003cdefs\u003e\n            \u003cfilter id=\"gooey-filter\"\u003e\n                \u003cfeGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\" result=\"blur\" /\u003e\n                \u003cfeColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7\"/\u003e\n            \u003c/filter\u003e\n        \u003c/defs\u003e\n    \u003c/svg\u003e\n\n`$w`: The width of each dot.\n\n`$h`: The height of each dot.\n\n`$bcol1, $bcol2, $bcol3`: The colors of each dot\n\n`$al`: length in seconds of the full animation\n\n`$fcw`: The width of the circle (and height) that all the dots move in\n\nNOTE: The SVG is not needed, but it looks better with it. (it makes the colors morph) NOTE: This one\nis the _most_ buggy out of all of them to customize. You can play around with it\n\n### Spinner (2 halves)\n\n    @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)\n\nVariables here are devided in the big circle and small circle\n\n`$c`: classname (string). Whatever classname you use should be the same the loader element. The\nloader is just 1 element using pseudo's if the name \"loading-spinner\" was used the HTML should look\nlike this:\n\n    \u003cdiv class=\"loading-spinner\"\u003e\u003c/div\u003e\n\n`$s`: The size of the big circle\n\n`$bs`: border-size of the big circle\n\n`$col`: Color of the big circle\n\n`$al`: Animation length of the big circles\n\n`$ad`: Animation direction: OPTIONAL. STANDARD: normal (clockwise)\n\n`$s-s`: size of the small circle. OPTIONAL, STANDARD: Big circle size - 20px\n\n`$s-bs`: border size of the small circle. OPTIONAL, STANDARD: Big circle border customize\n\n`$s-col`: Color of the small circle. OPTIONAL, STANDARD: big circle color\n\n`$s-al`: Animation length of the small circle. OPTIONAL, STANDARD: Big circle animation length\n\n`$s-ad`: Animation direction of the small circle. OPTIONAL, STANDARD: Reverse (counter-clockwise)\n\n### border\n\nThis one is a bit different. You put this one in a parent container of your choosing, the class does\nnot matter of the parent, only of the border elements. There's 2 elements both using the `:before`\nand `:after`. Together making all 4 sides.\n\nNOTE: Make the parent container `position: relative;`\n\n    @mixin create-border-elem($c, $t, $al, $col, $w: 100%, $h: 100%)\n\n`$c`: Classname, this is the base class. if you choose the class `loader-border` you place 2 `div`\nitems in a parent div of your choosing. The HTML should then look like this:\n\n    \u003cdiv class=\"any-class\"\u003e \u003c!-- The container that will have the border, this can be anything, this has to be position: relative.  --\u003e\n        \u003cdiv class=\"loader-border-lefttop\"\u003e\u003c/div\u003e \u003c!-- these 2 elements are both needed --\u003e\n        \u003cdiv class=\"loader-border-rightbot\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\n`$t`: The thickness of the border in px\n\n`$al`: Animation length\n\n`$col`: Color of the borders\n\n`$w`: The width of the parent. OPTIONAL, STANDARD: 100%\n\n`$h`: The height of the parent. OPTIONAL, STANDARD: 100%\n\nNOTE: If the parent has different width from height. Not giving the width and height will result in\nstrange results. still looking to fix this, but for now width and height needs to be given.\n\n## Credits\n\nCredit for the horizontal dots loader: https://codepen.io/jenning/pen/rrkBbq. I used his\n`cubic-bezier` css animation property, that's it\n\nCredit for the gooey loader: https://codepen.io/Izumenko/pen/MpWyXK. I used this and tried to make\nit more customizable\n\nCredit for the border animation: https://codepen.io/PicturElements/pen/ZOwkwv. Got the idea here,\nthought it looked cool\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb1996%2FPure-CSS-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdb1996%2FPure-CSS-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb1996%2FPure-CSS-loaders/lists"}