{"id":13405846,"url":"https://github.com/nzbin/three-dots","last_synced_at":"2025-05-14T23:04:20.211Z","repository":{"id":45053433,"uuid":"116205247","full_name":"nzbin/three-dots","owner":"nzbin","description":"🔮 CSS loading animations made with single element.","archived":false,"fork":false,"pushed_at":"2023-10-23T01:20:05.000Z","size":850,"stargazers_count":1341,"open_issues_count":5,"forks_count":131,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-14T04:35:22.732Z","etag":null,"topics":["less","loading-animations","sass","single-element-css-spinners","three-dots"],"latest_commit_sha":null,"homepage":"https://nzbin.github.io/three-dots/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nzbin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":"three-dots","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-01-04T02:34:37.000Z","updated_at":"2025-05-13T03:40:35.000Z","dependencies_parsed_at":"2023-01-31T08:15:51.550Z","dependency_job_id":"f3d90013-b808-4631-9269-2f19e1650942","html_url":"https://github.com/nzbin/three-dots","commit_stats":{"total_commits":125,"total_committers":6,"mean_commits":"20.833333333333332","dds":0.09599999999999997,"last_synced_commit":"9587ed245d7e379dc3e654451a2bcd5b5cce14b6"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fthree-dots","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fthree-dots/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fthree-dots/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nzbin%2Fthree-dots/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nzbin","download_url":"https://codeload.github.com/nzbin/three-dots/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254071468,"owners_count":22009794,"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":["less","loading-animations","sass","single-element-css-spinners","three-dots"],"created_at":"2024-07-30T19:02:13.584Z","updated_at":"2025-05-14T23:04:20.146Z","avatar_url":"https://github.com/nzbin.png","language":"SCSS","readme":"# Three Dots\n\n[![Build Status](https://app.travis-ci.com/nzbin/three-dots.svg?branch=master)](https://app.travis-ci.com/nzbin/three-dots)\n[![npm](https://img.shields.io/npm/v/three-dots.svg)](https://www.npmjs.com/package/three-dots)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/nzbin/three-dots)\n[![Financial Contributors on Open Collective](https://opencollective.com/three-dots/all/badge.svg?label=financial+contributors)](https://opencollective.com/three-dots) \n\nThree Dots is a set of CSS loading animations made with just single element. I think the project can not only enhance your CSS skills but also improve your imagination.\n\n## Installation\n\n```sh\nnpm install three-dots --save\n```\n\n## Usage\n\n1. Import the styles in your Sass file:\n\n```scss\n@use 'three-dots';\n```\n\n2. Add just one `div` tag:\n\n```html\n\u003cdiv class=\"dot-elastic\"\u003e\u003c/div\u003e\n```\n\nHere’s the list of three-dots classes you can choose from:\n\n```\ndot-elastic\ndot-pulse\ndot-flashing\ndot-collision\ndot-revolution\ndot-carousel\ndot-typing\ndot-windmill\ndot-bricks\ndot-floating\ndot-fire\ndot-spin\ndot-falling\ndot-stretching\n```\n\n## Customization\n\nCustomize the dot's size ( color, spacing, etc. ) with Dart Sass API.\n\n```scss\n@use 'three-dots' with (\n  $dot-width: 20px,\n  $dot-height: 20px,\n  ...\n);\n```\n\nThe available variables and their default values.\n\n```scss\n$dot-width: 10px;\n$dot-height: 10px;\n$dot-radius: $dot-width/2;\n\n$dot-color: #9880ff;\n$dot-bg-color: $dot-color;\n$dot-before-color: $dot-color;\n$dot-after-color: $dot-color;\n\n$dot-spacing: $dot-width + $dot-width/2;\n```\n\n## Contributors\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/nzbin/three-dots/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/three-dots/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/three-dots\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/three-dots/contribute)]\n\n\u003ca href=\"https://opencollective.com/three-dots/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/three-dots/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/three-dots/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\nMIT\n","funding_links":["https://opencollective.com/three-dots","https://opencollective.com/three-dots/contribute","https://opencollective.com/three-dots/organization/0/website","https://opencollective.com/three-dots/organization/1/website","https://opencollective.com/three-dots/organization/2/website","https://opencollective.com/three-dots/organization/3/website","https://opencollective.com/three-dots/organization/4/website","https://opencollective.com/three-dots/organization/5/website","https://opencollective.com/three-dots/organization/6/website","https://opencollective.com/three-dots/organization/7/website","https://opencollective.com/three-dots/organization/8/website","https://opencollective.com/three-dots/organization/9/website"],"categories":["🚀 A series of exquisite and compact web page cool effects","CSS","SCSS"],"sub_categories":["Loading Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzbin%2Fthree-dots","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnzbin%2Fthree-dots","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnzbin%2Fthree-dots/lists"}