├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yaml │ ├── feature_request.yaml │ └── others.yaml └── pull_request_template.md ├── 3D-loader ├── 3D-loader.css └── 3D-loader.html ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── CSS_Loading_Animation.html ├── LICENSE ├── README.md ├── Wavy_Loading.html ├── arrow-loader ├── index.html └── style.css ├── index.css ├── index.html ├── projects ├── 2dotloaders │ ├── index.css │ └── index.html ├── 3d-layer-loader │ ├── index.css │ └── index.html ├── 3dotLoader │ ├── index.css │ └── index.html ├── 3dot_loader │ ├── index.css │ └── index.html ├── 3layerloader │ ├── index.css │ └── index.html ├── CSS-Loading-Animation │ ├── README.md │ ├── index.html │ ├── logo.png │ └── style.css ├── Colourful_Checkbox_Loading.html ├── Cube-Drop-Loader │ ├── index.html │ └── style.css ├── Glowing-Loader-Ring │ ├── README.md │ ├── index.html │ ├── logo.png │ └── style.css ├── Heart-Shape-Preloader │ ├── index.html │ └── style.css ├── Kinetic_Loader.html ├── Microsoft-loader │ ├── index.html │ └── style.css ├── Space-loader │ ├── index.html │ └── style.css ├── TriColor_loader │ ├── index.css │ └── index.html ├── Windows loader │ └── index.html ├── atom │ ├── atom.css │ └── atom.html ├── ball-loader │ ├── index.css │ └── index.html ├── bar-loader │ ├── index.css │ └── index.html ├── ben10-watch-loader │ ├── index.css │ └── index.html ├── blink-loader │ ├── index.css │ └── index.html ├── bulge loader │ ├── index.html │ └── style.css ├── circular_loader │ ├── index.css │ └── index.html ├── clockloader │ ├── index.css │ └── index.html ├── cloud-loader │ ├── index.html │ └── style.css ├── diamondloader │ ├── index.html │ └── style.css ├── dice-loader │ ├── index.css │ └── index.html ├── disco-loader │ ├── index.css │ └── index.html ├── dot-loader │ ├── index.css │ └── index.html ├── dottedLoader │ ├── dottedLoader.css │ └── dottedLoader.html ├── double-filled loader │ ├── index.html │ └── style.css ├── double_ball_loader │ ├── index.css │ └── index.html ├── double_loader │ ├── index.css │ └── index.html ├── flat loader │ └── index.html ├── honey-comb-loader │ ├── index.html │ └── style.css ├── kinetic-loader │ ├── index.html │ └── style.css ├── loader │ ├── indexx.html │ └── style.css ├── loader_circle │ ├── index.css │ └── index.html ├── loader_circle_dots │ ├── index.css │ └── index.html ├── loader_dots │ ├── index.css │ └── index.html ├── loader_double_circle │ ├── index.css │ └── index.html ├── loading loader │ ├── index.html │ └── style.css ├── loveLoader │ ├── loveLoader.css │ └── loveLoader.html ├── mesh-loader │ ├── index.html │ └── style.css ├── moon-loader │ ├── index.css │ └── index.html ├── multiColor_Curve_Loader │ ├── index.html │ └── style.css ├── pac-man_loader │ ├── index.html │ └── style.css ├── pencil-loader │ ├── index.css │ └── index.html ├── processloader │ ├── index.css │ └── index.html ├── progress-loader │ ├── index.css │ └── index.html ├── progressloader │ ├── index.html │ └── style.css ├── pulsing-loader │ ├── index.html │ └── style.css ├── quarter-loader │ ├── index.css │ └── index.html ├── shape-loader │ ├── index.html │ └── style.css ├── skeleton-loader │ ├── index.html │ ├── script.js │ └── style.css ├── slider-loader │ ├── index.css │ └── index.html ├── spin-loader │ ├── index.css │ └── index.html ├── spiral-loader │ ├── index.css │ └── index.html ├── tennis-loader │ ├── index.css │ └── index.html ├── triangle_loaders │ ├── index.css │ └── index.html ├── tubeLoader │ ├── tubeLoader.css │ └── tubeLoader.html ├── wave-loader │ ├── index.css │ └── index.html ├── wobble-loader │ ├── index.html │ └── style.css └── zoomloader │ ├── index.css │ └── index.html └── style.css /.github/ISSUE_TEMPLATE/bug_report.yaml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: Report a bug you found 3 | title: 'Bug: ' 4 | labels: 'bug' 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out this bug report! 10 | 11 | - type: textarea #description 12 | attributes: 13 | label: What happened? 14 | description: Also tell us, what did you expect to happen? 15 | placeholder: Tell us what you see! 16 | validations: 17 | required: true 18 | 19 | - type: textarea #reproduce 20 | attributes: 21 | label: How can we reproduce this bug? 22 | description: Are there any specific steps you had to take in order to trigger the bug, and what is the expected behaviour we should expect? 23 | placeholder: Kindly elaborate. 24 | validations: 25 | required: true 26 | 27 | - type: textarea #Additional Information 28 | attributes: 29 | label: Additional context (if any) 30 | description: Is there something else you would like to add? (Like OS, Dependency versions etc) 31 | placeholder: Type here. 32 | 33 | - type: dropdown #urgent 34 | attributes: 35 | label: Urgency (Optional) 36 | description: How urgent do you think it is to fix this bug? 37 | options: 38 | - Low priority 39 | - Medium priority 40 | - High priority 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yaml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Request/Suggest any feature you think is missing 3 | title: 'Feature Request: ' 4 | labels: 'Feature Request' 5 | body: 6 | - type: textarea #description 7 | attributes: 8 | label: Is your feature request related to a problem? Please describe. 9 | description: A clear and concise description of what the problem is. 10 | placeholder: Ex. I'm always frustrated when [...] 11 | validations: 12 | required: true 13 | 14 | - type: textarea #solution 15 | attributes: 16 | label: Describe the solution you'd like. 17 | description: A clear and concise description of what you want to happen. 18 | placeholder: Kindly elaborate. 19 | validations: 20 | required: true 21 | 22 | - type: textarea #Additional Context 23 | attributes: 24 | label: Additional context (if any) 25 | description: Any miscellaneous suggestions you'd like to give. 26 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/others.yaml: -------------------------------------------------------------------------------- 1 | name: Others 2 | description: Any other issue you'd like to create. 3 | title: 'Title: ' 4 | body: 5 | - type: textarea #description 6 | attributes: 7 | label: Describe your issue. 8 | description: A clear and concise description of what the problem is. 9 | placeholder: Ex. I'm always frustrated when [...] 10 | validations: 11 | required: true 12 | 13 | - type: textarea #Screenshots 14 | attributes: 15 | label: Screenshots (if applicable). 16 | description: Attach any screenshots you think would help. 17 | placeholder: Kindly elaborate the screenshots. 18 | 19 | - type: textarea #Additional Context 20 | attributes: 21 | label: Additional context (if any) 22 | description: Anything else you'd like to add. 23 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | **Issue reference:** 2 | 3 | **Proposed changes:** 4 | 5 | **Type of change:** 6 | 7 | Please delete options that are not relevant. 8 | 9 | - [ ] Bug fix (non-breaking change which fixes an issue) 10 | - [ ] New feature (non-breaking change which adds functionality) 11 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 12 | - [ ] Other (please specify) 13 | - [ ] This change requires a documentation update 14 | 15 | **Checklist:** 16 | 17 | - [ ] My code follows the style guidelines of this project 18 | - [ ] I have performed a self-review of my own code 19 | - [ ] I have commented my code, particularly in hard-to-understand areas 20 | - [ ] I have made corresponding changes to the documentation 21 | - [ ] My changes generate no new warnings 22 | 23 | **Additional info (if any):** 24 | -------------------------------------------------------------------------------- /3D-loader/3D-loader.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body{ 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | background: #000; 11 | } 12 | .loader{ 13 | position: relative; 14 | width: 300px; 15 | height: 300px; 16 | transform-style: preserve-3d; 17 | transform: perspective(900px) rotateX(60deg); 18 | } 19 | .loader span{ 20 | position: absolute; 21 | display: block; 22 | border: 5px solid rgb(255, 255, 255); 23 | box-shadow: 0 8px 0 #ccc, 24 | inset 0 8px 0 #ccc; 25 | box-sizing: border-box; 26 | /* border-radius: 50%; */ 27 | animation: animated 3.2s ease-in-out infinite; 28 | } 29 | 30 | @keyframes animated{ 31 | 0%,60%{ 32 | transform: translateZ(0); 33 | border: 5px solid rgb(246, 255, 0); 34 | } 35 | 100%{ 36 | border: 5px solid rgb(255, 0, 102); 37 | 38 | } 39 | 80%{ 40 | border: 5px solid rgb(255, 119, 0); 41 | } 42 | 20%{ 43 | border: 5px solid rgb(0, 255, 234); 44 | transform:rotateZ(180deg); 45 | } 46 | 40%{ 47 | 48 | border: 5px solid rgb(0, 255, 30); 49 | transform:rotateY(180deg); 50 | } 51 | } 52 | 53 | .loader span:nth-child(1){ 54 | top: 0; 55 | left: 0; 56 | bottom: 0; 57 | right: 0; 58 | animation-delay: 0.5s; 59 | } 60 | .loader span:nth-child(2){ 61 | top: 10px; 62 | left: 10px; 63 | bottom: 10px; 64 | right: 10px; 65 | animation-delay: 0.6s; 66 | } 67 | .loader span:nth-child(3){ 68 | top: 20px; 69 | left: 20px; 70 | bottom: 20px; 71 | right: 20px; 72 | animation-delay: 0.8s; 73 | } 74 | .loader span:nth-child(4){ 75 | top: 30px; 76 | left: 30px; 77 | bottom: 30px; 78 | right: 30px; 79 | animation-delay: 0.9s; 80 | } 81 | .loader span:nth-child(5){ 82 | top: 40px; 83 | left: 40px; 84 | bottom: 40px; 85 | right: 40px; 86 | animation-delay: 1.0s; 87 | } 88 | .loader span:nth-child(6){ 89 | top: 50px; 90 | left: 50px; 91 | bottom: 50px; 92 | right: 50px; 93 | animation-delay: 1.1s; 94 | } 95 | .loader span:nth-child(7){ 96 | top: 60px; 97 | left: 60px; 98 | bottom: 60px; 99 | right: 60px; 100 | animation-delay: 1.2s; 101 | } 102 | .loader span:nth-child(8){ 103 | top: 70px; 104 | left: 70px; 105 | bottom: 70px; 106 | right: 70px; 107 | animation-delay: 1.3s; 108 | } 109 | .loader span:nth-child(9){ 110 | top: 80px; 111 | left: 80px; 112 | bottom: 80px; 113 | right: 80px; 114 | animation-delay: 1.4s; 115 | } 116 | .loader span:nth-child(10){ 117 | top: 90px; 118 | left: 90px; 119 | bottom: 90px; 120 | right: 90px; 121 | animation-delay: 1.5s; 122 | } 123 | .loader span:nth-child(11){ 124 | top: 100px; 125 | left: 100px; 126 | bottom: 100px; 127 | right: 100px; 128 | animation-delay: 1.6s; 129 | } 130 | .loader span:nth-child(12){ 131 | top: 110px; 132 | left: 110px; 133 | bottom: 110px; 134 | right: 110px; 135 | animation-delay: 1.7s; 136 | } 137 | .loader span:nth-child(13){ 138 | top: 120px; 139 | left: 120px; 140 | bottom: 120px; 141 | right: 120px; 142 | animation-delay: 1.8s; 143 | } 144 | .loader span:nth-child(14){ 145 | top: 130px; 146 | left: 130px; 147 | bottom: 130px; 148 | right: 130px; 149 | animation-delay: 1.9s; 150 | } 151 | .loader span:nth-child(15){ 152 | top: 140px; 153 | left: 140px; 154 | bottom: 140px; 155 | right: 140px; 156 | animation-delay: 2s; 157 | } 158 | .loader span:nth-child(16){ 159 | top: -10px; 160 | left: -10px; 161 | bottom: -10px; 162 | right: -10px; 163 | animation-delay: 0.4s; 164 | } -------------------------------------------------------------------------------- /3D-loader/3D-loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D-Loader 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | anshrusia2002@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 📃 Contribution Guide 2 | 3 | ## ❓ What to contribute? 4 | 5 | Using simple HTML, CSS, you can contribute an awesome CSS loaders. In addition, you can also contribute to existing projects. Ensure the project you contribute is unique. Pull requests that contain spam or plagiarism will not be considered. 6 | 7 | ## ❗ Important 8 | 9 | 👉 Make sure that each project you create has a `index.html` file. The HTML file should be named `index.html` and placed in the root directory of your project. 10 | 11 | 👉 Make sure that the project name does not contain a blank space. 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
Wrong ❌Right ✅
CSS LoaderCSS-Loader
23 | 24 | 👉 While adding images or linking some other `html` files, make sure the links do not start with a forward-slash (/). 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
Wrong ❌Right ✅
/image.pngimage.png
36 | 37 | ## 🤔 How to contribute? 38 | 39 | Here are the steps you can follow to start contributing: 40 | 41 | **Step 1:** From the issues page, select an issue which you think you can solve. 42 | 43 | **Step 2:** Fork the repository using the `Fork` option on the top-right corner of the page. 44 | 45 | **Step 3:** Clone forked version on your local machine: 46 | 47 | ```git 48 | git clone https://github.com//css-only-loaders.git 49 | ``` 50 | 51 | **Step 4:** Go inside cloned folder and add the original repository as `upstream`: 52 | 53 | ```git 54 | git remote add upstream https://github.com/anshrusia200/css-only-loaders.git 55 | ``` 56 | 57 | **Step 5:** Copy your JavaScript project inside the `/projects` folder. 58 | 59 | **Step 6:** Checkout to a new branch: 60 | 61 | ```git 62 | git checkout -b 63 | ``` 64 | 65 | (you can use the following format for the branch name: `-issue-`) 66 | 67 | **Step 7:** Make the desired changes to the code base. Also, before moving to the next step, make sure: 68 | 69 | - [x] Code follows the style guidelines of this project 70 | - [x] You have performed a self-review of my your own code 71 | - [x] You have commented your code, particularly in hard-to-understand areas 72 | - [x] You have made corresponding changes to the documentation 73 | - [x] Your changes generate no new warnings 74 | 75 | **Step 8:** Stage the changes, create a commit, and finally push the code to your forked repository: 76 | 77 | ```git 78 | # stage all the changes 79 | git add . 80 | 81 | # commit the staged changes 82 | git commit -m "" 83 | 84 | # push the code 85 | git push origin 86 | ``` 87 | 88 | **Step 9:** Create a pull request: 89 | 90 | 1. Go to the `pull requests` page on the original repository. 91 | 2. Click on `compare & pull request` option visible on the top. 92 | 3. Follow the Pull Request template provided to add the details. 93 | 4. Now click on `Create pull request`. 94 | 95 | **Step 10:** Discuss with the mentors if any changes are required on the pull request, before it gets merged. 96 | 97 | That it 🎉 98 | 99 | ## 🤔 What if all the issues are already assigned? 100 | 101 | If all the issues are already assigned, you can create your own issues. 102 | 103 | > NOTE: While creating your own issues, make sure to strictly follow the provided issue template. You can leave things blank which are not applicable, but just follow the pattern. 104 | -------------------------------------------------------------------------------- /CSS_Loading_Animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Loading Animation 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Loading...

17 |
18 | 19 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ansh Rusia 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 CSS Loaders 2 | 3 | In this repository, you can find CSS-only loaders that beginners can use for their first web project. 4 | 5 | ## 💙 For contributors 6 | 7 | Please read the following before contributing to the repository: 8 | 9 | - [Contribution Guide](./CONTRIBUTING.md) 10 | - [Code of Conduct](./CODE_OF_CONDUCT.md) 11 | - [License](./LICENSE.md) 12 | 13 | ## 😎 Maintainer 14 | 15 | Ansh Rusia 16 |
17 | LinkedIn 18 | Github 19 | 20 | ## 📄 License 21 | 22 | [MIT](./LICENSE.md) 23 | 24 |
25 |
26 |
27 | 28 |

29 | (If you liked the project, please give it a star 😃) 30 |

31 | -------------------------------------------------------------------------------- /Wavy_Loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wavy Text Animation 9 | 10 | 11 | 12 |
13 | L 14 | o 15 | a 16 | d 17 | i 18 | n 19 | g 20 | . 21 | . 22 | . 23 |
24 | 25 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /arrow-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Arrow Loader 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /arrow-loader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-width: 3px; 5 | border-style: dashed solid solid dotted; 6 | border-color: #FF3D00 #FF3D00 transparent #FF3D00; 7 | border-radius: 50%; 8 | display: inline-block; 9 | position: relative; 10 | box-sizing: border-box; 11 | animation: rotation 1s linear infinite; 12 | } 13 | .loader::after { 14 | content: ''; 15 | box-sizing: border-box; 16 | position: absolute; 17 | left: 20px; 18 | top: 31px; 19 | border: 10px solid transparent; 20 | border-right-color: #FF3D00; 21 | transform: rotate(-40deg); 22 | } 23 | 24 | @keyframes rotation { 25 | 0% { 26 | transform: rotate(0deg); 27 | } 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 64px; 4 | height: 64px; 5 | background-color: rgba(0, 0, 0, 0.5); 6 | transform: rotate(45deg); 7 | overflow: hidden; 8 | } 9 | .loader:after{ 10 | content: ''; 11 | position: absolute; 12 | inset: 8px; 13 | margin: auto; 14 | background: #222b32; 15 | } 16 | .loader:before{ 17 | content: ''; 18 | position: absolute; 19 | inset: -15px; 20 | margin: auto; 21 | background: #de3500; 22 | animation: diamondLoader 2s linear infinite; 23 | } 24 | @keyframes diamondLoader { 25 | 0% ,10% { 26 | transform: translate(-64px , -64px) rotate(-45deg) 27 | } 28 | 90% , 100% { 29 | transform: translate(0px , 0px) rotate(-45deg) 30 | } 31 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/2dotloaders/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 2px solid #FFF; 5 | border-radius: 50%; 6 | display: inline-block; 7 | position: relative; 8 | box-sizing: border-box; 9 | animation: rotation 1s linear infinite; 10 | } 11 | .loader::after, 12 | .loader::before { 13 | content: ''; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 0; 17 | top: 0; 18 | background: #FF3D00; 19 | width: 6px; 20 | height: 6px; 21 | transform: translate(150%, 150%); 22 | border-radius: 50%; 23 | } 24 | .loader::before { 25 | left: auto; 26 | top: auto; 27 | right: 0; 28 | bottom: 0; 29 | transform: translate(-150%, -150%); 30 | } 31 | 32 | @keyframes rotation { 33 | 0% { 34 | transform: rotate(0deg); 35 | } 36 | 100% { 37 | transform: rotate(360deg); 38 | } 39 | } -------------------------------------------------------------------------------- /projects/2dotloaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/3d-layer-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 48px; 4 | height: 48px; 5 | background: #de3500; 6 | transform: rotateX(65deg) rotate(45deg); 7 | transform: perspective(200px) rotateX(65deg) rotate(45deg); 8 | color: #fff; 9 | animation: layers1 1s linear infinite alternate; 10 | } 11 | .loader:after { 12 | content: ''; 13 | position: absolute; 14 | inset: 0; 15 | background: rgba(255, 255, 255, 0.7); 16 | animation: layerTr 1s linear infinite alternate; 17 | } 18 | 19 | @keyframes layers1 { 20 | 0% { 21 | box-shadow: 0px 0px 0 0px; 22 | } 23 | 90%, 24 | 100% { 25 | box-shadow: 20px 20px 0 -4px; 26 | } 27 | } 28 | @keyframes layerTr { 29 | 0% { 30 | transform: translate(0, 0) scale(1); 31 | } 32 | 100% { 33 | transform: translate(-25px, -25px) scale(1); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /projects/3d-layer-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/3dotLoader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 32px; 3 | height: 32px; 4 | position: relative; 5 | border-radius: 50%; 6 | color: #FF3D00; 7 | animation: fill 1s ease-in infinite alternate; 8 | } 9 | .loader::before , .loader::after { 10 | content: ''; 11 | position: absolute; 12 | height: 100%; 13 | width: 100%; 14 | border-radius: 50%; 15 | left: 48px; 16 | top: 0; 17 | animation: fill 0.9s ease-in infinite alternate; 18 | } 19 | 20 | .loader::after { 21 | left: auto; 22 | right: 48px; 23 | animation-duration: 1.1s; 24 | } 25 | 26 | @keyframes fill { 27 | 0% { box-shadow: 0 0 0 2px inset } 28 | 100%{ box-shadow: 0 0 0 10px inset } 29 | } 30 | -------------------------------------------------------------------------------- /projects/3dotLoader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/3dot_loader/index.css: -------------------------------------------------------------------------------- 1 | .cp-wrapper{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 97vh; 6 | } 7 | .cp-spinner { 8 | width: 100px; 9 | height: 100px; 10 | display: inline-block; 11 | box-sizing: border-box; 12 | position: relative; 13 | } 14 | .cp-round:before { 15 | border-radius: 50%; 16 | content: " "; 17 | width: 100px; 18 | height: 100px; 19 | display: inline-block; 20 | box-sizing: border-box; 21 | border-top: solid 6px #bababa; 22 | border-right: solid 6px #bababa; 23 | border-bottom: solid 6px #bababa; 24 | border-left: solid 6px #bababa; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | } 29 | .cp-round:after { 30 | border-radius: 50%; 31 | content: " "; 32 | width: 100px; 33 | height: 100px; 34 | display: inline-block; 35 | box-sizing: border-box; 36 | border-top: solid 6px #f56151; 37 | border-right: solid 6px transparent; 38 | border-bottom: solid 6px transparent; 39 | border-left: solid 6px transparent; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | animation: cp-round-animate 1s ease-in-out infinite; 44 | } 45 | @keyframes cp-round-animate { 46 | 0% { 47 | transform: rotate(0); 48 | } 49 | 100% { 50 | transform: rotate(360deg); 51 | } 52 | } 53 | .cp-pinwheel { 54 | border-radius: 50%; 55 | width: 48px; 56 | height: 48px; 57 | display: inline-block; 58 | box-sizing: border-box; 59 | border-top: solid 24px #0fd6ff; 60 | border-right: solid 24px #58bd55; 61 | border-bottom: solid 24px #eb68a1; 62 | border-left: solid 24px #f3d53f; 63 | animation: cp-pinwheel-animate 1s linear infinite; 64 | } 65 | @keyframes cp-pinwheel-animate { 66 | 0% { 67 | border-top-color: #0fd6ff; 68 | border-right-color: #58bd55; 69 | border-bottom-color: #eb68a1; 70 | border-left-color: #f3d53f; 71 | transform: rotate(0); 72 | } 73 | 25% { 74 | border-top-color: #eb68a1; 75 | border-right-color: #f3d53f; 76 | border-bottom-color: #0fd6ff; 77 | border-left-color: #58bd55; 78 | } 79 | 50% { 80 | border-top-color: #0fd6ff; 81 | border-right-color: #58bd55; 82 | border-bottom-color: #eb68a1; 83 | border-left-color: #f3d53f; 84 | } 85 | 75% { 86 | border-top-color: #eb68a1; 87 | border-right-color: #f3d53f; 88 | border-bottom-color: #0fd6ff; 89 | border-left-color: #58bd55; 90 | } 91 | 100% { 92 | border-top-color: #0fd6ff; 93 | border-right-color: #58bd55; 94 | border-bottom-color: #eb68a1; 95 | border-left-color: #f3d53f; 96 | transform: rotate(360deg); 97 | } 98 | } 99 | .cp-balls { 100 | animation: cp-balls-animate 1s linear infinite; 101 | } 102 | .cp-balls:before { 103 | border-radius: 50%; 104 | content: " "; 105 | width: 24px; 106 | height: 24px; 107 | display: inline-block; 108 | box-sizing: border-box; 109 | background-color: #0fd6ff; 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | animation: cp-balls-animate-before 1s ease-in-out infinite; 114 | } 115 | .cp-balls:after { 116 | border-radius: 50%; 117 | content: " "; 118 | width: 24px; 119 | height: 24px; 120 | display: inline-block; 121 | box-sizing: border-box; 122 | background-color: #eb68a1; 123 | position: absolute; 124 | bottom: 0; 125 | right: 0; 126 | animation: cp-balls-animate-after 1s ease-in-out infinite; 127 | } 128 | @keyframes cp-balls-animate { 129 | 0% { 130 | transform: rotate(0); 131 | } 132 | 100% { 133 | transform: rotate(360deg); 134 | } 135 | } 136 | @keyframes cp-balls-animate-before { 137 | 0% { 138 | transform: translate(-5px, -5px); 139 | } 140 | 50% { 141 | transform: translate(0, 0); 142 | } 143 | 100% { 144 | transform: translate(-5px, -5px); 145 | } 146 | } 147 | @keyframes cp-balls-animate-after { 148 | 0% { 149 | transform: translate(5px, 5px); 150 | } 151 | 50% { 152 | transform: translate(0, 0); 153 | } 154 | 100% { 155 | transform: translate(5px, 5px); 156 | } 157 | } 158 | .cp-bubble { 159 | border-radius: 50%; 160 | width: 24px; 161 | height: 24px; 162 | display: inline-block; 163 | box-sizing: border-box; 164 | background: #58bd55; 165 | animation: cp-bubble-animate 1s linear infinite; 166 | } 167 | .cp-bubble:before { 168 | border-radius: 50%; 169 | content: " "; 170 | width: 24px; 171 | height: 24px; 172 | display: inline-block; 173 | box-sizing: border-box; 174 | background-color: #58bd55; 175 | position: absolute; 176 | left: -30px; 177 | animation: cp-bubble-animate-before 1s ease-in-out infinite; 178 | } 179 | .cp-bubble:after { 180 | border-radius: 50%; 181 | content: " "; 182 | width: 24px; 183 | height: 24px; 184 | display: inline-block; 185 | box-sizing: border-box; 186 | background-color: #58bd55; 187 | position: absolute; 188 | right: -30px; 189 | animation: cp-bubble-animate-after 1s ease-in-out infinite; 190 | } 191 | @keyframes cp-bubble-animate { 192 | 0% { 193 | opacity: 0.5; 194 | transform: scale(1) translateX(0); 195 | } 196 | 25% { 197 | opacity: 1; 198 | transform: scale(1.1) translateX(-15px); 199 | } 200 | 50% { 201 | opacity: 1; 202 | transform: scale(1.2) translateX(15px); 203 | } 204 | 100% { 205 | opacity: 0.5; 206 | transform: scale(1) translateX(0); 207 | } 208 | } 209 | @keyframes cp-bubble-animate-before { 210 | 0% { 211 | opacity: 0.5; 212 | transform: scale(1); 213 | } 214 | 25% { 215 | transform: scale(1.1); 216 | } 217 | 100%, 218 | 50% { 219 | opacity: 1; 220 | transform: scale(1); 221 | } 222 | } 223 | @keyframes cp-bubble-animate-after { 224 | 0%, 225 | 50% { 226 | opacity: 0.5; 227 | transform: scale(1); 228 | } 229 | 50% { 230 | transform: scale(1.1); 231 | } 232 | 100%, 233 | 75% { 234 | opacity: 1; 235 | transform: scale(1); 236 | } 237 | } 238 | .cp-flip { 239 | transform-style: preserve-3d; 240 | perspective: 10em; 241 | } 242 | .cp-flip:before { 243 | width: 48px; 244 | height: 48px; 245 | display: inline-block; 246 | box-sizing: border-box; 247 | background: #f56151; 248 | content: " "; 249 | position: absolute; 250 | top: 0; 251 | left: 0; 252 | animation: cp-flip-animate-before 2s linear infinite; 253 | } 254 | @keyframes cp-flip-animate-before { 255 | 0% { 256 | transform: rotateY(0) rotateX(0); 257 | } 258 | 25% { 259 | transform: rotateY(360deg) rotateX(0); 260 | } 261 | 50% { 262 | transform: rotateY(360deg) rotateX(360deg); 263 | } 264 | 75% { 265 | transform: rotateY(0) rotateX(360deg); 266 | } 267 | 100% { 268 | transform: rotateY(0) rotateX(0); 269 | } 270 | } 271 | .cp-hue { 272 | width: 24px; 273 | height: 24px; 274 | display: inline-block; 275 | box-sizing: border-box; 276 | background: #f56151; 277 | border-radius: 50%; 278 | animation: cp-hue-animate 1s ease-in-out infinite; 279 | } 280 | .cp-hue:before { 281 | border-radius: 0 12px 12px 0; 282 | content: " "; 283 | width: 12px; 284 | height: 24px; 285 | display: inline-block; 286 | box-sizing: border-box; 287 | background: #fff; 288 | position: absolute; 289 | top: 0; 290 | right: 0; 291 | animation: cp-hue-animate-before 1s ease-in-out infinite; 292 | } 293 | @keyframes cp-hue-animate { 294 | 0% { 295 | background: #f56151; 296 | } 297 | 25% { 298 | background: #58bd55; 299 | } 300 | 50% { 301 | background: #eb68a1; 302 | } 303 | 75% { 304 | background: #f3d53f; 305 | } 306 | 100% { 307 | background: #f56151; 308 | } 309 | } 310 | @keyframes cp-hue-animate-before { 311 | 0% { 312 | transform: rotateY(0); 313 | transform-origin: left center; 314 | opacity: 0.5; 315 | } 316 | 30%, 317 | 70% { 318 | transform: rotateY(180deg); 319 | transform-origin: left center; 320 | opacity: 0.2; 321 | } 322 | 100% { 323 | transform: rotateY(0); 324 | opacity: 0.5; 325 | } 326 | } 327 | .cp-skeleton { 328 | border-radius: 50%; 329 | border-top: solid 6px #f56151; 330 | border-right: solid 6px transparent; 331 | border-bottom: solid 6px transparent; 332 | border-left: solid 6px transparent; 333 | animation: cp-skeleton-animate 1s linear infinite; 334 | } 335 | .cp-skeleton:before { 336 | border-radius: 50%; 337 | content: " "; 338 | width: 48px; 339 | height: 48px; 340 | display: inline-block; 341 | box-sizing: border-box; 342 | border-top: solid 6px transparent; 343 | border-right: solid 6px transparent; 344 | border-bottom: solid 6px transparent; 345 | border-left: solid 6px #f56151; 346 | position: absolute; 347 | top: -6px; 348 | left: -6px; 349 | transform: rotateZ(-30deg); 350 | } 351 | .cp-skeleton:after { 352 | border-radius: 50%; 353 | content: " "; 354 | width: 48px; 355 | height: 48px; 356 | display: inline-block; 357 | box-sizing: border-box; 358 | border-top: solid 6px transparent; 359 | border-right: solid 6px #f56151; 360 | border-bottom: solid 6px transparent; 361 | border-left: solid 6px transparent; 362 | position: absolute; 363 | top: -6px; 364 | right: -6px; 365 | transform: rotateZ(30deg); 366 | } 367 | @keyframes cp-skeleton-animate { 368 | 0% { 369 | transform: rotate(0); 370 | opacity: 1; 371 | } 372 | 50% { 373 | opacity: 0.7; 374 | } 375 | 100% { 376 | transform: rotate(360deg); 377 | opacity: 1; 378 | } 379 | } 380 | .cp-eclipse { 381 | width: 12px; 382 | height: 12px; 383 | display: inline-block; 384 | box-sizing: border-box; 385 | border-radius: 50%; 386 | background: #f3d53f; 387 | margin: 12px; 388 | animation: cp-eclipse-animate 1s ease-out infinite; 389 | } 390 | .cp-eclipse:before { 391 | border-radius: 50%; 392 | content: " "; 393 | width: 48px; 394 | height: 48px; 395 | display: inline-block; 396 | box-sizing: border-box; 397 | border-top: solid 6px transparent; 398 | border-right: solid 6px #f3d53f; 399 | border-bottom: solid 6px transparent; 400 | border-left: solid 6px transparent; 401 | position: absolute; 402 | top: -18px; 403 | left: -18px; 404 | } 405 | .cp-eclipse:after { 406 | border-radius: 50%; 407 | content: " "; 408 | width: 48px; 409 | height: 48px; 410 | display: inline-block; 411 | box-sizing: border-box; 412 | border-top: solid 6px transparent; 413 | border-right: solid 6px transparent; 414 | border-bottom: solid 6px transparent; 415 | border-left: solid 6px #f3d53f; 416 | position: absolute; 417 | top: -18px; 418 | right: -18px; 419 | } 420 | @keyframes cp-eclipse-animate { 421 | 0% { 422 | transform: rotate(0); 423 | } 424 | 100% { 425 | transform: rotate(360deg); 426 | } 427 | } 428 | .cp-boxes:before { 429 | width: 24px; 430 | height: 24px; 431 | display: inline-block; 432 | box-sizing: border-box; 433 | content: " "; 434 | background: #58bd55; 435 | position: absolute; 436 | top: 12px; 437 | left: 0; 438 | animation: cp-boxes-animate-before 1s ease-in-out infinite; 439 | } 440 | .cp-boxes:after { 441 | width: 24px; 442 | height: 24px; 443 | display: inline-block; 444 | box-sizing: border-box; 445 | content: " "; 446 | background: #58bd55; 447 | position: absolute; 448 | top: 12px; 449 | right: 0; 450 | animation: cp-boxes-animate-after 1s ease-in-out infinite; 451 | } 452 | @keyframes cp-boxes-animate-before { 453 | 0% { 454 | transform: translateX(-24px) rotate(45deg); 455 | } 456 | 50% { 457 | transform: translateX(-8px) rotate(225deg); 458 | } 459 | 100% { 460 | transform: translateX(-24px) rotate(45deg); 461 | } 462 | } 463 | @keyframes cp-boxes-animate-after { 464 | 0% { 465 | transform: translateX(24px) rotate(45deg); 466 | } 467 | 50% { 468 | transform: translateX(8px) rotate(-225deg); 469 | } 470 | 100% { 471 | transform: translateX(24px) rotate(45deg); 472 | } 473 | } 474 | .cp-morph { 475 | width: 48px; 476 | height: 48px; 477 | display: inline-block; 478 | box-sizing: border-box; 479 | background: #0fd6ff; 480 | animation: cp-morph-animate 1s linear infinite; 481 | } 482 | @keyframes cp-morph-animate { 483 | 0% { 484 | transform: rotate(0) scale(1); 485 | border-radius: 0; 486 | background: #f3d53f; 487 | } 488 | 25%, 489 | 75% { 490 | transform: rotate(180deg) scale(0.4); 491 | border-radius: 50%; 492 | background: #0fd6ff; 493 | } 494 | 100% { 495 | transform: rotate(360deg) scale(1); 496 | border-radius: 0; 497 | background: #f3d53f; 498 | } 499 | } 500 | .cp-heart { 501 | animation: cp-heart-animate 2s ease-in-out infinite; 502 | } 503 | .cp-heart:before { 504 | border-radius: 12px 12px 0 0; 505 | content: " "; 506 | width: 24px; 507 | height: 35px; 508 | display: inline-block; 509 | box-sizing: border-box; 510 | background-color: #eb68a1; 511 | transform: rotate(-45deg); 512 | position: absolute; 513 | top: 0; 514 | left: 8px; 515 | } 516 | .cp-heart:after { 517 | border-radius: 12px 12px 0 0; 518 | content: " "; 519 | width: 24px; 520 | height: 35px; 521 | display: inline-block; 522 | box-sizing: border-box; 523 | background-color: #eb68a1; 524 | transform: rotate(45deg); 525 | position: absolute; 526 | top: 0; 527 | right: 8px; 528 | } 529 | @keyframes cp-heart-animate { 530 | 0% { 531 | transform: scale(0.9); 532 | transform-origin: center; 533 | } 534 | 15% { 535 | transform: scale(1.4); 536 | transform-origin: center; 537 | } 538 | 30% { 539 | transform: scale(0.9); 540 | transform-origin: center; 541 | } 542 | 45% { 543 | transform: scale(1.4); 544 | transform-origin: center; 545 | } 546 | 100%, 547 | 60% { 548 | transform: scale(0.9); 549 | transform-origin: center; 550 | } 551 | } 552 | .cp-meter { 553 | border-radius: 50%; 554 | border-top: solid 6px #0fd6ff; 555 | border-right: solid 6px #0fd6ff; 556 | border-bottom: solid 6px #0fd6ff; 557 | border-left: solid 6px #0fd6ff; 558 | width: 48px; 559 | height: 48px; 560 | display: inline-block; 561 | box-sizing: border-box; 562 | } 563 | .cp-meter:before { 564 | border-radius: 3px; 565 | content: " "; 566 | width: 6px; 567 | height: 12px; 568 | display: inline-block; 569 | box-sizing: border-box; 570 | background-color: #0fd6ff; 571 | position: absolute; 572 | top: 5px; 573 | left: 16px; 574 | transform-origin: center bottom; 575 | animation: cp-meter-animate-before 1s linear infinite; 576 | } 577 | @keyframes cp-meter-animate-before { 578 | 0% { 579 | transform: rotate(-45deg); 580 | } 581 | 100% { 582 | transform: rotate(315deg); 583 | } 584 | } 585 | -------------------------------------------------------------------------------- /projects/3dot_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSSPIN - CSS Spinners and Loaders 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 19 | 20 |
21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /projects/3layerloader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 48px; 4 | height: 48px; 5 | background: #de3500; 6 | transform: rotateX(65deg) rotate(45deg); 7 | 8 | transform: perspective(200px) rotateX(65deg) rotate(45deg); 9 | color: #fff; 10 | animation: layers1 1s linear infinite alternate; 11 | } 12 | .loader:after { 13 | content: ''; 14 | position: absolute; 15 | inset: 0; 16 | background: rgba(255, 255, 255, 0.7); 17 | animation: layerTr 1s linear infinite alternate; 18 | } 19 | 20 | @keyframes layers1 { 21 | 0% { box-shadow: 0px 0px 0 0px } 22 | 90% , 100% { box-shadow: 20px 20px 0 -4px } 23 | } 24 | @keyframes layerTr { 25 | 0% { transform: translate(0, 0) scale(1) } 26 | 100% { transform: translate(-25px, -25px) scale(1) } 27 | } 28 | -------------------------------------------------------------------------------- /projects/3layerloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/CSS-Loading-Animation/README.md: -------------------------------------------------------------------------------- 1 | # CSS Loading Animation 2 | 3 | ![1_lJ32Bl-lHWmNMUSiSq17gQ](https://user-images.githubusercontent.com/72864817/171863780-16f7afb7-32a5-4547-a427-23c8a8ed0524.png) 4 | 5 | # Screenshots 6 | 7 | ![image](https://user-images.githubusercontent.com/72864817/171995283-b73dec00-936b-4899-b934-5e2beadb7d74.png) 8 | 9 | ![image](https://user-images.githubusercontent.com/72864817/171995333-c859a89e-0303-4562-a314-5995edbd22c6.png) 10 | -------------------------------------------------------------------------------- /projects/CSS-Loading-Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Loading Animation 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |

Loading...

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/CSS-Loading-Animation/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anshrusia200/css-only-loaders/0e111a1bb51cb0116c3b179c07f9ece3cb9ca5e4/projects/CSS-Loading-Animation/logo.png -------------------------------------------------------------------------------- /projects/CSS-Loading-Animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #111; 13 | } 14 | 15 | .container { 16 | position: relative; 17 | width: 100%; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .container .ring { 24 | position: relative; 25 | width: 150px; 26 | height: 150px; 27 | margin: -30px; 28 | border-radius: 50%; 29 | border: 4px solid transparent; 30 | border-top: 4px solid #24ecff; 31 | animation: animate 4s linear infinite; 32 | } 33 | 34 | .container .ring::before { 35 | content: ''; 36 | position: absolute; 37 | top: 12px; 38 | right: 12px; 39 | border-radius: 50%; 40 | width: 15px; 41 | height: 15px; 42 | background: #24ecff; 43 | box-shadow: 0 0 0 5px #24ecff33, 44 | 0 0 0 10px #24ecff22, 45 | 0 0 0 20px #24ecff11, 46 | 0 0 20px #24ecff, 47 | 0 0 50px #24ecff; 48 | } 49 | 50 | .container p { 51 | position: absolute; 52 | color: #fff; 53 | font-size: 1.5em; 54 | font-family: consolas; 55 | bottom: -80px; 56 | letter-spacing: 0.15em; 57 | } 58 | 59 | .container .ring:nth-child(2) { 60 | animation: animate2 4s linear infinite; 61 | animation-delay: -1s; 62 | border-top: 4px solid transparent; 63 | border-left: 4px solid #93ff2d; 64 | } 65 | 66 | .container .ring:nth-child(2)::before { 67 | content: ''; 68 | position: absolute; 69 | top: initial; 70 | bottom: 12px; 71 | left: 12px; 72 | border-radius: 50%; 73 | width: 15px; 74 | height: 15px; 75 | background: #93ff2d; 76 | box-shadow: 0 0 0 5px #93ff2d33, 77 | 0 0 0 10px #93ff2d22, 78 | 0 0 0 20px #93ff2d11, 79 | 0 0 20px #93ff2d, 80 | 0 0 50px #93ff2d; 81 | } 82 | 83 | .container .ring:nth-child(3) { 84 | animation: animate2 4s linear infinite; 85 | animation-delay: -3s; 86 | position: absolute; 87 | top: -66.66%; 88 | border-top: 4px solid transparent; 89 | border-left: 4px solid #e41cf8; 90 | } 91 | 92 | .container .ring:nth-child(3)::before { 93 | content: ''; 94 | position: absolute; 95 | top: initial; 96 | bottom: 12px; 97 | left: 12px; 98 | border-radius: 50%; 99 | width: 15px; 100 | height: 15px; 101 | background: #e41cf8; 102 | box-shadow: 0 0 0 5px #e41cf833, 103 | 0 0 0 10px #e41cf822, 104 | 0 0 0 20px #e41cf811, 105 | 0 0 20px #e41cf8, 106 | 0 0 50px #e41cf8; 107 | } 108 | 109 | 110 | @keyframes animate { 111 | 0% { 112 | transform: rotate(0deg); 113 | } 114 | 115 | 100% { 116 | transform: rotate(360deg); 117 | } 118 | } 119 | 120 | @keyframes animate2 { 121 | 0% { 122 | transform: rotate(360deg); 123 | } 124 | 125 | 100% { 126 | transform: rotate(0deg); 127 | } 128 | } -------------------------------------------------------------------------------- /projects/Colourful_Checkbox_Loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Load 6 | 7 | 8 | 9 | 10 | 13 | 14 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /projects/Cube-Drop-Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cube-Drop-Loader 9 | 10 | 11 |
Made by spyMonk
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /projects/Cube-Drop-Loader/style.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes enter { 2 | 0% { 3 | opacity: 0; 4 | top: -10px; 5 | } 6 | 5% { 7 | opacity: 1; 8 | top: 0px; 9 | } 10 | 50.9% { 11 | opacity: 1; 12 | top: 0px; 13 | } 14 | 55.9% { 15 | opacity: 0; 16 | top: - -10px; 17 | } 18 | } 19 | @keyframes enter { 20 | 0% { 21 | opacity: 0; 22 | top: -10px; 23 | } 24 | 5% { 25 | opacity: 1; 26 | top: 0px; 27 | } 28 | 50.9% { 29 | opacity: 1; 30 | top: 0px; 31 | } 32 | 55.9% { 33 | opacity: 0; 34 | top: - -10px; 35 | } 36 | } 37 | @-moz-keyframes enter { 38 | 0% { 39 | opacity: 0; 40 | top: -10px; 41 | } 42 | 5% { 43 | opacity: 1; 44 | top: 0px; 45 | } 46 | 50.9% { 47 | opacity: 1; 48 | top: 0px; 49 | } 50 | 55.9% { 51 | opacity: 0; 52 | top: - -10px; 53 | } 54 | } 55 | body { 56 | background: #1fbeca; 57 | } 58 | * { 59 | margin: 0; 60 | } 61 | .loader { 62 | position: absolute; 63 | left: 50%; 64 | top: 50%; 65 | margin-left: - 27.5px; 66 | margin-top: - 27.5px; 67 | } 68 | .square { 69 | background: white; 70 | width: 15px; 71 | height: 15px; 72 | float: left; 73 | top: -10px; 74 | margin-right: 5px; 75 | margin-top: 5px; 76 | position: relative; 77 | opacity: 0; 78 | -webkit-animation: enter 6s infinite; 79 | animation: enter 6s infinite; 80 | } 81 | .enter { 82 | top: 0px; 83 | opacity: 1; 84 | } 85 | .square:nth-child(1) { 86 | -webkit-animation-delay: 1.8s; 87 | -moz-animation-delay: 1.8s; 88 | animation-delay: 1.8s; 89 | } 90 | .square:nth-child(2) { 91 | -webkit-animation-delay: 2.1s; 92 | -moz-animation-delay: 2.1s; 93 | animation-delay: 2.1s; 94 | } 95 | .square:nth-child(3) { 96 | -webkit-animation-delay: 2.4s; 97 | -moz-animation-delay: 2.4s; 98 | animation-delay: 2.4s; 99 | background: #fdc96f; 100 | } 101 | .square:nth-child(4) { 102 | -webkit-animation-delay: 0.9s; 103 | -moz-animation-delay: 0.9s; 104 | animation-delay: 0.9s; 105 | } 106 | .square:nth-child(5) { 107 | -webkit-animation-delay: 1.2s; 108 | -moz-animation-delay: 1.2s; 109 | animation-delay: 1.2s; 110 | } 111 | .square:nth-child(6) { 112 | -webkit-animation-delay: 1.5s; 113 | -moz-animation-delay: 1.5s; 114 | animation-delay: 1.5s; 115 | } 116 | .square:nth-child(8) { 117 | -webkit-animation-delay: 0.3s; 118 | -moz-animation-delay: 0.3s; 119 | animation-delay: 0.3s; 120 | } 121 | .square:nth-child(9) { 122 | -webkit-animation-delay: 0.6s; 123 | -moz-animation-delay: 0.6s; 124 | animation-delay: 0.6s; 125 | } 126 | .clear { 127 | clear: both; 128 | } 129 | .last { 130 | margin-right: 0; 131 | } 132 | -------------------------------------------------------------------------------- /projects/Glowing-Loader-Ring/README.md: -------------------------------------------------------------------------------- 1 | # Glowing Loader Ring 2 | 3 | ![1_lJ32Bl-lHWmNMUSiSq17gQ](https://user-images.githubusercontent.com/72864817/171863780-16f7afb7-32a5-4547-a427-23c8a8ed0524.png) 4 | 5 | # Screenshots 6 | 7 | ![image](https://user-images.githubusercontent.com/72864817/172042830-27b677be-10aa-48ea-9250-438181b7c6e8.png) 8 | 9 | ![image](https://user-images.githubusercontent.com/72864817/172042875-161747b1-8342-45b7-8a47-c57a8e69773c.png) 10 | -------------------------------------------------------------------------------- /projects/Glowing-Loader-Ring/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Glowing Loader Ring 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /projects/Glowing-Loader-Ring/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anshrusia200/css-only-loaders/0e111a1bb51cb0116c3b179c07f9ece3cb9ca5e4/projects/Glowing-Loader-Ring/logo.png -------------------------------------------------------------------------------- /projects/Glowing-Loader-Ring/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #000; 5 | } 6 | 7 | .glowing { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | width: 260px; 13 | height: 260px; 14 | } 15 | 16 | .glowing span { 17 | position: absolute; 18 | border-radius: 50%; 19 | box-sizing: border-box; 20 | } 21 | 22 | .glowing span::before { 23 | content: ''; 24 | position: absolute; 25 | top: 50%; 26 | left: -5px; 27 | width: 10px; 28 | height: 10px; 29 | background: #ff0; 30 | border-radius: 50%; 31 | } 32 | 33 | .glowing span:nth-child(1) { 34 | top: 0; 35 | bottom: 0; 36 | left: 0; 37 | right: 0; 38 | /* border: 1px solid rgba(255, 255, 255, 0.05); */ 39 | animation: animate 4s linear infinite; 40 | } 41 | 42 | .glowing span:nth-child(1)::before { 43 | background: rgba(134, 255, 0, 1); 44 | box-shadow: 0 0 20px rgba(134, 255, 0, 1), 45 | 0 0 40px rgba(134, 255, 0, 1), 46 | 0 0 60px rgba(134, 255, 0, 1), 47 | 0 0 80px rgba(134, 255, 0, 1), 48 | 0 0 0 4px rgba(134, 255, 0, 0.1); 49 | } 50 | 51 | .glowing span:nth-child(2) { 52 | 53 | top: 40px; 54 | bottom: 40px; 55 | left: 40px; 56 | right: 40px; 57 | /* border: 1px solid rgba(255, 255, 255, 0.05); */ 58 | animation: animate-reverse 3s linear infinite; 59 | } 60 | 61 | .glowing span:nth-child(2)::before { 62 | background: rgba(255, 214, 0, 1); 63 | box-shadow: 0 0 20px rgba(255, 214, 0, 1), 64 | 0 0 40px rgba(255, 214, 0, 1), 65 | 0 0 60px rgba(255, 214, 0, 1), 66 | 0 0 80px rgba(255, 214, 0, 1), 67 | 0 0 0 4px rgba(255, 214, 0, 0.1); 68 | } 69 | 70 | .glowing span:nth-child(3) { 71 | top: 80px; 72 | bottom: 80px; 73 | left: 80px; 74 | right: 80px; 75 | /* border: 1px solid rgba(255, 255, 255, 0.05); */ 76 | animation: animate 2s linear infinite; 77 | } 78 | 79 | .glowing span:nth-child(3)::before { 80 | background: rgba(0, 226, 255, 1); 81 | box-shadow: 0 0 20px rgba(0, 226, 255, 1), 82 | 0 0 40px rgba(0, 226, 255, 1), 83 | 0 0 60px rgba(0, 226, 255, 1), 84 | 0 0 80px rgba(0, 226, 255, 1), 85 | 0 0 0 4px rgba(0, 226, 255, 0.1); 86 | } 87 | 88 | @keyframes animate { 89 | 0% { 90 | transform: rotate(0deg); 91 | } 92 | 93 | 100% { 94 | transform: rotate(360deg); 95 | } 96 | } 97 | 98 | @keyframes animate-reverse { 99 | 0% { 100 | transform: rotate(360deg); 101 | } 102 | 103 | 100% { 104 | transform: rotate(0deg); 105 | } 106 | } -------------------------------------------------------------------------------- /projects/Heart-Shape-Preloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Heart Shape Preloader 6 | 7 | 8 | 9 |
10 |
11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /projects/Heart-Shape-Preloader/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | position: absolute; 3 | top: 50%; 4 | left: 50%; 5 | transform: translate(-50%, -50%); 6 | } 7 | .container .preloader{ 8 | animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 9 | } 10 | @keyframes rotate { 11 | 50%{ 12 | transform: rotate(360deg); 13 | } 14 | 100%{ 15 | transform: rotate(720deg); 16 | } 17 | } 18 | .preloader span{ 19 | position: absolute; 20 | display: block; 21 | height: 64px; 22 | width: 64px; 23 | background: #3fc1f2; 24 | border: 1px solid #3fc1f2; 25 | border-radius: 100%; 26 | } 27 | .preloader span:nth-child(1){ 28 | transform: translate(-28px, -28px); 29 | animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 30 | } 31 | @keyframes shape_1 { 32 | 60%{ 33 | transform: scale(0.4); 34 | } 35 | } 36 | .preloader span:nth-child(2){ 37 | transform: translate(28px, -28px); 38 | animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 39 | } 40 | @keyframes shape_2 { 41 | 40%{ 42 | transform: scale(0.4); 43 | } 44 | } 45 | .preloader span:nth-child(3){ 46 | position: relative; 47 | border-radius: 0px; 48 | transform: scale(0.98) rotate(-45deg); 49 | animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 50 | } 51 | @keyframes shape_3 { 52 | 50%{ 53 | border-radius: 100%; 54 | transform: scale(0.5) rotate(-45deg); 55 | } 56 | 100%{ 57 | transform: scale(0.98) rotate(-45deg); 58 | } 59 | } 60 | .shadow{ 61 | position: relative; 62 | top: 30px; 63 | left: 50%; 64 | transform: translateX(-50%); 65 | display: block; 66 | height: 16px; 67 | width: 64px; 68 | border-radius: 50%; 69 | background-color: #d9d9d9; 70 | border: 1px solid #d9d9d9; 71 | animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite; 72 | } 73 | @keyframes shadow { 74 | 50%{ 75 | transform: translateX(-50%) scale(0.5); 76 | border-color: #f2f2f2; 77 | } 78 | } -------------------------------------------------------------------------------- /projects/Kinetic_Loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Kinetic Loader 7 | 8 | 9 |
10 | 11 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /projects/Microsoft-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Microsoft-Loader 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/Microsoft-loader/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Open Sans', sans-serif; 7 | } 8 | 9 | a{ 10 | text-decoration: none; 11 | } 12 | 13 | /* GRID */ 14 | 15 | .twelve { width: 100%; } 16 | .eleven { width: 91.53%; } 17 | .ten { width: 83.06%; } 18 | .nine { width: 74.6%; } 19 | .eight { width: 66.13%; } 20 | .seven { width: 57.66%; } 21 | .six { width: 49.2%; } 22 | .five { width: 40.73%; } 23 | .four { width: 32.26%; } 24 | .three { width: 23.8%; } 25 | .two { width: 15.33%; } 26 | .one { width: 6.866%; } 27 | 28 | .col { 29 | display: block; 30 | float:left; 31 | margin: 1% 0 1% 1.6%; 32 | } 33 | 34 | .col:first-of-type { 35 | margin-left: 38%; 36 | } 37 | 38 | .container{ 39 | width: 100%; 40 | max-width: 940px; 41 | margin: 0 auto; 42 | position: relative; 43 | text-align: center; 44 | } 45 | 46 | .cf:before, 47 | .cf:after { 48 | content: " "; 49 | display: table; 50 | } 51 | 52 | .cf:after { 53 | clear: both; 54 | } 55 | 56 | .cf { 57 | *zoom: 1; 58 | } 59 | 60 | .row{ 61 | margin: 30px 0; 62 | } 63 | 64 | .three{ 65 | background-color: #eee; 66 | padding: 50px 0; 67 | } 68 | 69 | .loader{ 70 | width: 100px; 71 | height: 100px; 72 | border-radius: 100%; 73 | position: relative; 74 | margin: 0 auto; 75 | } 76 | 77 | #loader-5 span{ 78 | display: block; 79 | position: absolute; 80 | left: calc(50% - 20px); 81 | top: calc(50% - 20px); 82 | width: 20px; 83 | height: 20px; 84 | background-color: #3498db; 85 | } 86 | 87 | #loader-5 span:nth-child(2){ 88 | animation: moveanimation1 1s ease-in-out infinite; 89 | } 90 | 91 | #loader-5 span:nth-child(3){ 92 | animation: moveanimation2 1s ease-in-out infinite; 93 | } 94 | 95 | #loader-5 span:nth-child(4){ 96 | animation: moveanimation3 1s ease-in-out infinite; 97 | } 98 | 99 | @keyframes moveanimation1{ 100 | 0%, 100%{ 101 | -webkit-transform: translateX(0px); 102 | -ms-transform: translateX(0px); 103 | -o-transform: translateX(0px); 104 | transform: translateX(0px); 105 | } 106 | 107 | 75%{ 108 | -webkit-transform: translateX(30px); 109 | -ms-transform: translateX(30px); 110 | -o-transform: translateX(30px); 111 | transform: translateX(30px); 112 | } 113 | } 114 | 115 | @keyframes moveanimation2{ 116 | 0%, 100%{ 117 | -webkit-transform: translateY(0px); 118 | -ms-transform: translateY(0px); 119 | -o-transform: translateY(0px); 120 | transform: translateY(0px); 121 | } 122 | 123 | 75%{ 124 | -webkit-transform: translateY(30px); 125 | -ms-transform: translateY(30px); 126 | -o-transform: translateY(30px); 127 | transform: translateY(30px); 128 | } 129 | } 130 | 131 | @keyframes moveanimation3{ 132 | 0%, 100%{ 133 | -webkit-transform: translate(0px, 0px); 134 | -ms-transform: translate(0px, 0px); 135 | -o-transform: translate(0px, 0px); 136 | transform: translate(0px, 0px); 137 | } 138 | 139 | 75%{ 140 | -webkit-transform: translate(30px, 30px); 141 | -ms-transform: translate(30px, 30px); 142 | -o-transform: translate(30px, 30px); 143 | transform: translate(30px, 30px); 144 | } 145 | } -------------------------------------------------------------------------------- /projects/Space-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Space Loader 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/Space-loader/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: aquamarine; 3 | } 4 | 5 | .loader { 6 | margin-top: 20%; 7 | margin-left: 45%; 8 | font-size: 48px; 9 | color: rgb(0, 0, 255); 10 | display: inline-block; 11 | font-family: Arial, Helvetica, sans-serif; 12 | font-weight: 400; 13 | position: relative; 14 | } 15 | 16 | .loader:before { 17 | content: ''; 18 | animation: 5s print linear alternate infinite; 19 | } 20 | 21 | .loader:after { 22 | content: ''; 23 | position: absolute; 24 | right: -4px; 25 | top: 50%; 26 | transform: translatey(-45%); 27 | width: 2px; 28 | height: 1.3em; 29 | background: currentColor; 30 | opacity: 0.8; 31 | animation: 1s blink steps(2) infinite; 32 | } 33 | 34 | @keyframes blink { 35 | 0% { 36 | visibility: hidden; 37 | } 38 | 39 | 100% { 40 | visibility: visible; 41 | } 42 | } 43 | 44 | @keyframes print { 45 | 0% { 46 | content: 'L' 47 | } 48 | 49 | 10% { 50 | content: 'Lo' 51 | } 52 | 53 | 20% { 54 | content: 'Loa' 55 | } 56 | 57 | 30% { 58 | content: 'Load' 59 | } 60 | 61 | 40% { 62 | content: 'Loadi' 63 | } 64 | 65 | 50% { 66 | content: 'Loadin' 67 | } 68 | 69 | 60% { 70 | content: 'Loading' 71 | } 72 | 73 | 70% { 74 | content: 'Loading.' 75 | } 76 | 77 | 80% { 78 | content: 'Loading..' 79 | } 80 | 81 | 90%, 82 | 100% { 83 | content: 'Loading...' 84 | } 85 | } -------------------------------------------------------------------------------- /projects/TriColor_loader/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | background: #151320; 13 | } 14 | 15 | .loader { 16 | width: 100px; 17 | height: 100px; 18 | border-radius: 50%; 19 | perspective: 800px; 20 | } 21 | 22 | .loader .loader-item { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | border-radius: 50%; 27 | } 28 | 29 | .loader .loader-item:nth-child(1) { 30 | border-bottom: 6px solid #f13a8f; 31 | transform: rotateX(35deg) rotateY(-45deg); 32 | animation: rotate-one 1s linear infinite; 33 | } 34 | 35 | .loader .loader-item:nth-child(2) { 36 | border-right: 6px solid #4bc8eb; 37 | transform: rotateX(50deg) rotateY(10deg); 38 | animation: rotate-two 1s linear infinite; 39 | } 40 | 41 | .loader .loader-item:nth-child(3) { 42 | border-top: 6px solid #36f372; 43 | transform: rotateX(35deg) rotateY(55deg); 44 | animation: rotate-three 1s linear infinite; 45 | } 46 | 47 | @keyframes rotate-one { 48 | to { 49 | transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); 50 | } 51 | } 52 | 53 | @keyframes rotate-two { 54 | to { 55 | transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); 56 | } 57 | } 58 | 59 | @keyframes rotate-three { 60 | to { 61 | transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); 62 | } 63 | } -------------------------------------------------------------------------------- /projects/TriColor_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loader 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /projects/Windows loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 168 | 169 | 170 | 171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 | 216 | 217 | -------------------------------------------------------------------------------- /projects/atom/atom.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | display: inline-block; 6 | position: relative; 7 | border: 2px solid #FF3D00; 8 | box-sizing: border-box; 9 | animation: rotation 1s linear infinite; 10 | } 11 | .loader::after { 12 | content: ''; 13 | box-sizing: border-box; 14 | position: absolute; 15 | left: 4px; 16 | top: 4px; 17 | border: 2px solid #FFF; 18 | width: 12px; 19 | height: 12px; 20 | border-radius: 50%; 21 | } 22 | 23 | @keyframes rotation { 24 | 0% { 25 | transform: rotate(0deg); 26 | } 27 | 100% { 28 | transform: rotate(360deg); 29 | } 30 | } -------------------------------------------------------------------------------- /projects/atom/atom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/ball-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 2px solid #fff; 5 | border-radius: 50%; 6 | display: inline-block; 7 | position: relative; 8 | box-sizing: border-box; 9 | animation: rotation 1s linear infinite; 10 | } 11 | .loader::after, 12 | .loader::before { 13 | content: ""; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 0; 17 | top: 0; 18 | background: #ff3d00; 19 | width: 6px; 20 | height: 6px; 21 | transform: translate(150%, 150%); 22 | border-radius: 50%; 23 | } 24 | .loader::before { 25 | left: auto; 26 | top: auto; 27 | right: 0; 28 | bottom: 0; 29 | transform: translate(-150%, -150%); 30 | } 31 | 32 | @keyframes rotation { 33 | 0% { 34 | transform: rotate(0deg); 35 | } 36 | 100% { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/ball-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/bar-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 55px; 4 | height: 55px; 5 | background-repeat: no-repeat; 6 | background-image: linear-gradient(#fff 50px, transparent 0), 7 | linear-gradient(#fff 50px, transparent 0), 8 | linear-gradient(#fff 50px, transparent 0), 9 | linear-gradient(#fff 50px, transparent 0), 10 | linear-gradient(#fff 50px, transparent 0), 11 | linear-gradient(#fff 50px, transparent 0); 12 | background-size: 5px 40px; 13 | background-position: 0px center, 10px center, 20px center, 30px center, 14 | 40px center, 50px center; 15 | animation: spikeUp 1s linear infinite alternate; 16 | } 17 | @keyframes spikeUp { 18 | 0% { 19 | background-size: 5px 40px; 20 | } 21 | 16% { 22 | background-size: 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px; 23 | } 24 | 33% { 25 | background-size: 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px, 5px 40px; 26 | } 27 | 50% { 28 | background-size: 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px, 5px 40px; 29 | } 30 | 66% { 31 | background-size: 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px, 5px 40px; 32 | } 33 | 83% { 34 | background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px, 5px 40px; 35 | } 36 | 100% { 37 | background-size: 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 40px, 5px 55px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/bar-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/ben10-watch-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | border: 2px solid #FFF; 3 | width: 48px; 4 | height: 48px; 5 | background: #FF3D00; 6 | border-radius: 50%; 7 | display: inline-block; 8 | position: relative; 9 | box-sizing: border-box; 10 | animation: rotation 2s linear infinite; 11 | } 12 | .loader::after { 13 | content: ''; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 50%; 17 | top: 50%; 18 | border: 24px solid; 19 | border-color: transparent #FFF; 20 | border-radius: 50%; 21 | transform: translate(-50%, -50%); 22 | } 23 | 24 | @keyframes rotation { 25 | 0% { 26 | transform: rotate(0deg); 27 | } 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } -------------------------------------------------------------------------------- /projects/ben10-watch-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/blink-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 32px; 3 | height: 32px; 4 | position: relative; 5 | border-radius: 50%; 6 | color: #FF3D00; 7 | animation: fill 1s ease-in infinite alternate; 8 | } 9 | .loader::before , .loader::after { 10 | content: ''; 11 | position: absolute; 12 | height: 100%; 13 | width: 100%; 14 | border-radius: 50%; 15 | left: 48px; 16 | top: 0; 17 | animation: fill 0.9s ease-in infinite alternate; 18 | } 19 | 20 | .loader::after { 21 | left: auto; 22 | right: 48px; 23 | animation-duration: 1.1s; 24 | } 25 | 26 | @keyframes fill { 27 | 0% { box-shadow: 0 0 0 2px inset } 28 | 100%{ box-shadow: 0 0 0 10px inset } 29 | } 30 | -------------------------------------------------------------------------------- /projects/blink-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/bulge loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | bulge 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/bulge loader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 84px; 3 | height: 84px; 4 | position: relative; 5 | } 6 | .loader:before , .loader:after { 7 | content: ""; 8 | position: absolute; 9 | right: 0; 10 | top: 0; 11 | width:84px; 12 | height: 84px; 13 | border-radius: 50%; 14 | background:#FF3D00; 15 | animation: push 1s infinite linear alternate; 16 | } 17 | .loader:after { 18 | top: auto; 19 | bottom: 0; 20 | left: 0; 21 | background: #fff; 22 | animation-direction: alternate-reverse; 23 | } 24 | @keyframes push { 25 | 0% { 26 | width:14px; 27 | height: 14px; 28 | } 29 | 100% { 30 | width:84px; 31 | height: 84px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /projects/circular_loader/index.css: -------------------------------------------------------------------------------- 1 | .cp-wrapper{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 97vh; 6 | } 7 | .cp-spinner { 8 | width: 100px; 9 | height: 100px; 10 | display: inline-block; 11 | box-sizing: border-box; 12 | position: relative; 13 | } 14 | .cp-round:before { 15 | border-radius: 50%; 16 | content: " "; 17 | width: 100px; 18 | height: 100px; 19 | display: inline-block; 20 | box-sizing: border-box; 21 | border-top: solid 6px #bababa; 22 | border-right: solid 6px #bababa; 23 | border-bottom: solid 6px #bababa; 24 | border-left: solid 6px #bababa; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | } 29 | .cp-round:after { 30 | border-radius: 50%; 31 | content: " "; 32 | width: 100px; 33 | height: 100px; 34 | display: inline-block; 35 | box-sizing: border-box; 36 | border-top: solid 6px #f56151; 37 | border-right: solid 6px transparent; 38 | border-bottom: solid 6px transparent; 39 | border-left: solid 6px transparent; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | animation: cp-round-animate 1s ease-in-out infinite; 44 | } 45 | @keyframes cp-round-animate { 46 | 0% { 47 | transform: rotate(0); 48 | } 49 | 100% { 50 | transform: rotate(360deg); 51 | } 52 | } 53 | .cp-pinwheel { 54 | border-radius: 50%; 55 | width: 48px; 56 | height: 48px; 57 | display: inline-block; 58 | box-sizing: border-box; 59 | border-top: solid 24px #0fd6ff; 60 | border-right: solid 24px #58bd55; 61 | border-bottom: solid 24px #eb68a1; 62 | border-left: solid 24px #f3d53f; 63 | animation: cp-pinwheel-animate 1s linear infinite; 64 | } 65 | @keyframes cp-pinwheel-animate { 66 | 0% { 67 | border-top-color: #0fd6ff; 68 | border-right-color: #58bd55; 69 | border-bottom-color: #eb68a1; 70 | border-left-color: #f3d53f; 71 | transform: rotate(0); 72 | } 73 | 25% { 74 | border-top-color: #eb68a1; 75 | border-right-color: #f3d53f; 76 | border-bottom-color: #0fd6ff; 77 | border-left-color: #58bd55; 78 | } 79 | 50% { 80 | border-top-color: #0fd6ff; 81 | border-right-color: #58bd55; 82 | border-bottom-color: #eb68a1; 83 | border-left-color: #f3d53f; 84 | } 85 | 75% { 86 | border-top-color: #eb68a1; 87 | border-right-color: #f3d53f; 88 | border-bottom-color: #0fd6ff; 89 | border-left-color: #58bd55; 90 | } 91 | 100% { 92 | border-top-color: #0fd6ff; 93 | border-right-color: #58bd55; 94 | border-bottom-color: #eb68a1; 95 | border-left-color: #f3d53f; 96 | transform: rotate(360deg); 97 | } 98 | } 99 | .cp-balls { 100 | animation: cp-balls-animate 1s linear infinite; 101 | } 102 | .cp-balls:before { 103 | border-radius: 50%; 104 | content: " "; 105 | width: 24px; 106 | height: 24px; 107 | display: inline-block; 108 | box-sizing: border-box; 109 | background-color: #0fd6ff; 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | animation: cp-balls-animate-before 1s ease-in-out infinite; 114 | } 115 | .cp-balls:after { 116 | border-radius: 50%; 117 | content: " "; 118 | width: 24px; 119 | height: 24px; 120 | display: inline-block; 121 | box-sizing: border-box; 122 | background-color: #eb68a1; 123 | position: absolute; 124 | bottom: 0; 125 | right: 0; 126 | animation: cp-balls-animate-after 1s ease-in-out infinite; 127 | } 128 | @keyframes cp-balls-animate { 129 | 0% { 130 | transform: rotate(0); 131 | } 132 | 100% { 133 | transform: rotate(360deg); 134 | } 135 | } 136 | @keyframes cp-balls-animate-before { 137 | 0% { 138 | transform: translate(-5px, -5px); 139 | } 140 | 50% { 141 | transform: translate(0, 0); 142 | } 143 | 100% { 144 | transform: translate(-5px, -5px); 145 | } 146 | } 147 | @keyframes cp-balls-animate-after { 148 | 0% { 149 | transform: translate(5px, 5px); 150 | } 151 | 50% { 152 | transform: translate(0, 0); 153 | } 154 | 100% { 155 | transform: translate(5px, 5px); 156 | } 157 | } 158 | .cp-bubble { 159 | border-radius: 50%; 160 | width: 24px; 161 | height: 24px; 162 | display: inline-block; 163 | box-sizing: border-box; 164 | background: #58bd55; 165 | animation: cp-bubble-animate 1s linear infinite; 166 | } 167 | .cp-bubble:before { 168 | border-radius: 50%; 169 | content: " "; 170 | width: 24px; 171 | height: 24px; 172 | display: inline-block; 173 | box-sizing: border-box; 174 | background-color: #58bd55; 175 | position: absolute; 176 | left: -30px; 177 | animation: cp-bubble-animate-before 1s ease-in-out infinite; 178 | } 179 | .cp-bubble:after { 180 | border-radius: 50%; 181 | content: " "; 182 | width: 24px; 183 | height: 24px; 184 | display: inline-block; 185 | box-sizing: border-box; 186 | background-color: #58bd55; 187 | position: absolute; 188 | right: -30px; 189 | animation: cp-bubble-animate-after 1s ease-in-out infinite; 190 | } 191 | @keyframes cp-bubble-animate { 192 | 0% { 193 | opacity: 0.5; 194 | transform: scale(1) translateX(0); 195 | } 196 | 25% { 197 | opacity: 1; 198 | transform: scale(1.1) translateX(-15px); 199 | } 200 | 50% { 201 | opacity: 1; 202 | transform: scale(1.2) translateX(15px); 203 | } 204 | 100% { 205 | opacity: 0.5; 206 | transform: scale(1) translateX(0); 207 | } 208 | } 209 | @keyframes cp-bubble-animate-before { 210 | 0% { 211 | opacity: 0.5; 212 | transform: scale(1); 213 | } 214 | 25% { 215 | transform: scale(1.1); 216 | } 217 | 100%, 218 | 50% { 219 | opacity: 1; 220 | transform: scale(1); 221 | } 222 | } 223 | @keyframes cp-bubble-animate-after { 224 | 0%, 225 | 50% { 226 | opacity: 0.5; 227 | transform: scale(1); 228 | } 229 | 50% { 230 | transform: scale(1.1); 231 | } 232 | 100%, 233 | 75% { 234 | opacity: 1; 235 | transform: scale(1); 236 | } 237 | } 238 | .cp-flip { 239 | transform-style: preserve-3d; 240 | perspective: 10em; 241 | } 242 | .cp-flip:before { 243 | width: 48px; 244 | height: 48px; 245 | display: inline-block; 246 | box-sizing: border-box; 247 | background: #f56151; 248 | content: " "; 249 | position: absolute; 250 | top: 0; 251 | left: 0; 252 | animation: cp-flip-animate-before 2s linear infinite; 253 | } 254 | @keyframes cp-flip-animate-before { 255 | 0% { 256 | transform: rotateY(0) rotateX(0); 257 | } 258 | 25% { 259 | transform: rotateY(360deg) rotateX(0); 260 | } 261 | 50% { 262 | transform: rotateY(360deg) rotateX(360deg); 263 | } 264 | 75% { 265 | transform: rotateY(0) rotateX(360deg); 266 | } 267 | 100% { 268 | transform: rotateY(0) rotateX(0); 269 | } 270 | } 271 | .cp-hue { 272 | width: 24px; 273 | height: 24px; 274 | display: inline-block; 275 | box-sizing: border-box; 276 | background: #f56151; 277 | border-radius: 50%; 278 | animation: cp-hue-animate 1s ease-in-out infinite; 279 | } 280 | .cp-hue:before { 281 | border-radius: 0 12px 12px 0; 282 | content: " "; 283 | width: 12px; 284 | height: 24px; 285 | display: inline-block; 286 | box-sizing: border-box; 287 | background: #fff; 288 | position: absolute; 289 | top: 0; 290 | right: 0; 291 | animation: cp-hue-animate-before 1s ease-in-out infinite; 292 | } 293 | @keyframes cp-hue-animate { 294 | 0% { 295 | background: #f56151; 296 | } 297 | 25% { 298 | background: #58bd55; 299 | } 300 | 50% { 301 | background: #eb68a1; 302 | } 303 | 75% { 304 | background: #f3d53f; 305 | } 306 | 100% { 307 | background: #f56151; 308 | } 309 | } 310 | @keyframes cp-hue-animate-before { 311 | 0% { 312 | transform: rotateY(0); 313 | transform-origin: left center; 314 | opacity: 0.5; 315 | } 316 | 30%, 317 | 70% { 318 | transform: rotateY(180deg); 319 | transform-origin: left center; 320 | opacity: 0.2; 321 | } 322 | 100% { 323 | transform: rotateY(0); 324 | opacity: 0.5; 325 | } 326 | } 327 | .cp-skeleton { 328 | border-radius: 50%; 329 | border-top: solid 6px #f56151; 330 | border-right: solid 6px transparent; 331 | border-bottom: solid 6px transparent; 332 | border-left: solid 6px transparent; 333 | animation: cp-skeleton-animate 1s linear infinite; 334 | } 335 | .cp-skeleton:before { 336 | border-radius: 50%; 337 | content: " "; 338 | width: 48px; 339 | height: 48px; 340 | display: inline-block; 341 | box-sizing: border-box; 342 | border-top: solid 6px transparent; 343 | border-right: solid 6px transparent; 344 | border-bottom: solid 6px transparent; 345 | border-left: solid 6px #f56151; 346 | position: absolute; 347 | top: -6px; 348 | left: -6px; 349 | transform: rotateZ(-30deg); 350 | } 351 | .cp-skeleton:after { 352 | border-radius: 50%; 353 | content: " "; 354 | width: 48px; 355 | height: 48px; 356 | display: inline-block; 357 | box-sizing: border-box; 358 | border-top: solid 6px transparent; 359 | border-right: solid 6px #f56151; 360 | border-bottom: solid 6px transparent; 361 | border-left: solid 6px transparent; 362 | position: absolute; 363 | top: -6px; 364 | right: -6px; 365 | transform: rotateZ(30deg); 366 | } 367 | @keyframes cp-skeleton-animate { 368 | 0% { 369 | transform: rotate(0); 370 | opacity: 1; 371 | } 372 | 50% { 373 | opacity: 0.7; 374 | } 375 | 100% { 376 | transform: rotate(360deg); 377 | opacity: 1; 378 | } 379 | } 380 | .cp-eclipse { 381 | width: 12px; 382 | height: 12px; 383 | display: inline-block; 384 | box-sizing: border-box; 385 | border-radius: 50%; 386 | background: #f3d53f; 387 | margin: 12px; 388 | animation: cp-eclipse-animate 1s ease-out infinite; 389 | } 390 | .cp-eclipse:before { 391 | border-radius: 50%; 392 | content: " "; 393 | width: 48px; 394 | height: 48px; 395 | display: inline-block; 396 | box-sizing: border-box; 397 | border-top: solid 6px transparent; 398 | border-right: solid 6px #f3d53f; 399 | border-bottom: solid 6px transparent; 400 | border-left: solid 6px transparent; 401 | position: absolute; 402 | top: -18px; 403 | left: -18px; 404 | } 405 | .cp-eclipse:after { 406 | border-radius: 50%; 407 | content: " "; 408 | width: 48px; 409 | height: 48px; 410 | display: inline-block; 411 | box-sizing: border-box; 412 | border-top: solid 6px transparent; 413 | border-right: solid 6px transparent; 414 | border-bottom: solid 6px transparent; 415 | border-left: solid 6px #f3d53f; 416 | position: absolute; 417 | top: -18px; 418 | right: -18px; 419 | } 420 | @keyframes cp-eclipse-animate { 421 | 0% { 422 | transform: rotate(0); 423 | } 424 | 100% { 425 | transform: rotate(360deg); 426 | } 427 | } 428 | .cp-boxes:before { 429 | width: 24px; 430 | height: 24px; 431 | display: inline-block; 432 | box-sizing: border-box; 433 | content: " "; 434 | background: #58bd55; 435 | position: absolute; 436 | top: 12px; 437 | left: 0; 438 | animation: cp-boxes-animate-before 1s ease-in-out infinite; 439 | } 440 | .cp-boxes:after { 441 | width: 24px; 442 | height: 24px; 443 | display: inline-block; 444 | box-sizing: border-box; 445 | content: " "; 446 | background: #58bd55; 447 | position: absolute; 448 | top: 12px; 449 | right: 0; 450 | animation: cp-boxes-animate-after 1s ease-in-out infinite; 451 | } 452 | @keyframes cp-boxes-animate-before { 453 | 0% { 454 | transform: translateX(-24px) rotate(45deg); 455 | } 456 | 50% { 457 | transform: translateX(-8px) rotate(225deg); 458 | } 459 | 100% { 460 | transform: translateX(-24px) rotate(45deg); 461 | } 462 | } 463 | @keyframes cp-boxes-animate-after { 464 | 0% { 465 | transform: translateX(24px) rotate(45deg); 466 | } 467 | 50% { 468 | transform: translateX(8px) rotate(-225deg); 469 | } 470 | 100% { 471 | transform: translateX(24px) rotate(45deg); 472 | } 473 | } 474 | .cp-morph { 475 | width: 48px; 476 | height: 48px; 477 | display: inline-block; 478 | box-sizing: border-box; 479 | background: #0fd6ff; 480 | animation: cp-morph-animate 1s linear infinite; 481 | } 482 | @keyframes cp-morph-animate { 483 | 0% { 484 | transform: rotate(0) scale(1); 485 | border-radius: 0; 486 | background: #f3d53f; 487 | } 488 | 25%, 489 | 75% { 490 | transform: rotate(180deg) scale(0.4); 491 | border-radius: 50%; 492 | background: #0fd6ff; 493 | } 494 | 100% { 495 | transform: rotate(360deg) scale(1); 496 | border-radius: 0; 497 | background: #f3d53f; 498 | } 499 | } 500 | .cp-heart { 501 | animation: cp-heart-animate 2s ease-in-out infinite; 502 | } 503 | .cp-heart:before { 504 | border-radius: 12px 12px 0 0; 505 | content: " "; 506 | width: 24px; 507 | height: 35px; 508 | display: inline-block; 509 | box-sizing: border-box; 510 | background-color: #eb68a1; 511 | transform: rotate(-45deg); 512 | position: absolute; 513 | top: 0; 514 | left: 8px; 515 | } 516 | .cp-heart:after { 517 | border-radius: 12px 12px 0 0; 518 | content: " "; 519 | width: 24px; 520 | height: 35px; 521 | display: inline-block; 522 | box-sizing: border-box; 523 | background-color: #eb68a1; 524 | transform: rotate(45deg); 525 | position: absolute; 526 | top: 0; 527 | right: 8px; 528 | } 529 | @keyframes cp-heart-animate { 530 | 0% { 531 | transform: scale(0.9); 532 | transform-origin: center; 533 | } 534 | 15% { 535 | transform: scale(1.4); 536 | transform-origin: center; 537 | } 538 | 30% { 539 | transform: scale(0.9); 540 | transform-origin: center; 541 | } 542 | 45% { 543 | transform: scale(1.4); 544 | transform-origin: center; 545 | } 546 | 100%, 547 | 60% { 548 | transform: scale(0.9); 549 | transform-origin: center; 550 | } 551 | } 552 | .cp-meter { 553 | border-radius: 50%; 554 | border-top: solid 6px #0fd6ff; 555 | border-right: solid 6px #0fd6ff; 556 | border-bottom: solid 6px #0fd6ff; 557 | border-left: solid 6px #0fd6ff; 558 | width: 48px; 559 | height: 48px; 560 | display: inline-block; 561 | box-sizing: border-box; 562 | } 563 | .cp-meter:before { 564 | border-radius: 3px; 565 | content: " "; 566 | width: 6px; 567 | height: 12px; 568 | display: inline-block; 569 | box-sizing: border-box; 570 | background-color: #0fd6ff; 571 | position: absolute; 572 | top: 5px; 573 | left: 16px; 574 | transform-origin: center bottom; 575 | animation: cp-meter-animate-before 1s linear infinite; 576 | } 577 | @keyframes cp-meter-animate-before { 578 | 0% { 579 | transform: rotate(-45deg); 580 | } 581 | 100% { 582 | transform: rotate(315deg); 583 | } 584 | } 585 | -------------------------------------------------------------------------------- /projects/circular_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSSPIN - CSS Spinners and Loaders 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 16 | 17 |
18 | 19 |
20 | 21 | -------------------------------------------------------------------------------- /projects/clockloader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | border:24px solid #FFF; 4 | border-radius:50%; 5 | transform: rotate(45deg); 6 | animation: pieFill 3s linear infinite; 7 | } 8 | 9 | @keyframes pieFill { 10 | 0% , 19%{ border-color: #FFF #FFF #FFF #FFF } 11 | 20% , 39%{ border-color: #FF3D00 #FFF #FFF #FFF } 12 | 40% , 59%{ border-color: #FF3D00 #FF3D00 #FFF #FFF } 13 | 60% , 79%{ border-color: #FF3D00 #FF3D00 #FF3D00 #FFF } 14 | 80% , 100% { border-color: #FF3D00 #FF3D00 #FF3D00 #FF3D00 } 15 | } -------------------------------------------------------------------------------- /projects/clockloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/cloud-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/cloud-loader/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: black; 3 | } 4 | 5 | .loader { 6 | width: 175px; 7 | height: 80px; 8 | display: block; 9 | margin: auto; 10 | background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); 11 | background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; 12 | background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; 13 | background-repeat: no-repeat; 14 | position: relative; 15 | box-sizing: border-box; 16 | } 17 | 18 | .loader::after { 19 | content: ''; 20 | left: 0; 21 | right: 0; 22 | margin: auto; 23 | bottom: 20px; 24 | position: absolute; 25 | width: 36px; 26 | height: 36px; 27 | border-radius: 50%; 28 | border: 5px solid transparent; 29 | border-color: #FF3D00 transparent; 30 | box-sizing: border-box; 31 | animation: rotation 1s linear infinite; 32 | } 33 | 34 | @keyframes rotation { 35 | 0% { 36 | transform: rotate(0deg); 37 | } 38 | 39 | 100% { 40 | transform: rotate(360deg); 41 | } 42 | } -------------------------------------------------------------------------------- /projects/diamondloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/diamondloader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 64px; 4 | height: 64px; 5 | background-color: rgba(0, 0, 0, 0.5); 6 | transform: rotate(45deg); 7 | overflow: hidden; 8 | } 9 | .loader:after{ 10 | content: ''; 11 | position: absolute; 12 | inset: 8px; 13 | margin: auto; 14 | background: #222b32; 15 | } 16 | .loader:before{ 17 | content: ''; 18 | position: absolute; 19 | inset: -15px; 20 | margin: auto; 21 | background: #de3500; 22 | animation: diamondLoader 2s linear infinite; 23 | } 24 | @keyframes diamondLoader { 25 | 0% ,10% { 26 | transform: translate(-64px , -64px) rotate(-45deg) 27 | } 28 | 90% , 100% { 29 | transform: translate(0px , 0px) rotate(-45deg) 30 | } 31 | } -------------------------------------------------------------------------------- /projects/dice-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 54px; 3 | height: 54px; 4 | position: relative; 5 | border-radius: 4px; 6 | background-color: #fff; 7 | background-image: radial-gradient(circle 5px, #ff3d00 100%, transparent 0), 8 | radial-gradient(circle 5px, #ff3d00 100%, transparent 0), 9 | radial-gradient(circle 5px, #ff3d00 100%, transparent 0), 10 | radial-gradient(circle 5px, #ff3d00 100%, transparent 0), 11 | radial-gradient(circle 5px, #ff3d00 100%, transparent 0), 12 | radial-gradient(circle 5px, #ff3d00 100%, transparent 0); 13 | background-repeat: no-repeat; 14 | animation: move 4s linear infinite, rotate 2s linear infinite; 15 | } 16 | 17 | @keyframes rotate { 18 | 0%, 19 | 20% { 20 | transform: rotate(0deg); 21 | } 22 | 30%, 23 | 40% { 24 | transform: rotate(90deg); 25 | } 26 | 50%, 27 | 60% { 28 | transform: rotate(180deg); 29 | } 30 | 70%, 31 | 80% { 32 | transform: rotate(270deg); 33 | } 34 | 90%, 35 | 100% { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | @keyframes move { 40 | 0%, 41 | 9% { 42 | background-position: -12px -15px, -12px 0px, -12px 15px, 12px -15px, 43 | 12px 0px, 12px 15px; 44 | } 45 | 10%, 46 | 25% { 47 | background-position: 0px -15px, -12px 0px, -12px 15px, 34px -15px, 12px 0px, 48 | 12px 15px; 49 | } 50 | 30%, 51 | 45% { 52 | background-position: 0px -34px, -12px -10px, -12px 12px, 34px -15px, 53 | 12px -10px, 12px 12px; 54 | } 55 | 50%, 56 | 65% { 57 | background-position: 0px -34px, -12px -34px, -12px 12px, 34px -12px, 58 | 0px -10px, 12px 12px; 59 | } 60 | 70%, 61 | 85% { 62 | background-position: 0px -34px, -12px -34px, 0px 12px, 34px -12px, 0px -10px, 63 | 34px 12px; 64 | } 65 | 90%, 66 | 100% { 67 | background-position: 0px -34px, -12px -34px, 0px 0px, 34px -12px, 0px 0px, 68 | 34px 12px; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /projects/dice-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/disco-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | font-size: 48px; 3 | color: #fff; 4 | width: 1em; 5 | height: 1em; 6 | box-sizing: border-box; 7 | background-color: currentcolor; 8 | position: relative; 9 | border-radius: 50%; 10 | transform: rotateX(-60deg) perspective(1000px); 11 | } 12 | .loader:before, 13 | .loader:after { 14 | content: ""; 15 | display: block; 16 | position: absolute; 17 | box-sizing: border-box; 18 | top: 0; 19 | left: 0; 20 | width: inherit; 21 | height: inherit; 22 | border-radius: inherit; 23 | animation: flowerFlow 1s ease-out infinite; 24 | } 25 | .loader:after { 26 | animation-delay: 0.4s; 27 | } 28 | 29 | @keyframes flowerFlow { 30 | 0% { 31 | opacity: 1; 32 | transform: rotate(0deg); 33 | box-shadow: 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 34 | 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 35 | 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor, 36 | 0 0 0 -0.5em currentcolor, 0 0 0 -0.5em currentcolor; 37 | } 38 | 100% { 39 | opacity: 0; 40 | transform: rotate(180deg); 41 | box-shadow: -1em -1em 0 -0.35em currentcolor, 42 | 0 -1.5em 0 -0.35em currentcolor, 1em -1em 0 -0.35em currentcolor, 43 | -1.5em 0 0 -0.35em currentcolor, 1.5em -0 0 -0.35em currentcolor, 44 | -1em 1em 0 -0.35em currentcolor, 0 1.5em 0 -0.35em currentcolor, 45 | 1em 1em 0 -0.35em currentcolor; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /projects/disco-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/dot-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: calc(100px - 14px); 3 | height: 50px; 4 | position: relative; 5 | animation: flippx 1s infinite linear; 6 | } 7 | .loader:before { 8 | content: ""; 9 | position: absolute; 10 | inset: 0; 11 | margin: auto; 12 | width: 20px; 13 | height: 20px; 14 | border-radius: 50%; 15 | background: #FF3D00; 16 | transform-origin: -14px 50%; 17 | animation: spin 0.5s infinite linear; 18 | } 19 | @keyframes flippx { 20 | 0%, 49% { 21 | transform: scaleX(1); 22 | } 23 | 50%, 100% { 24 | transform: scaleX(-1); 25 | } 26 | } 27 | @keyframes spin { 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /projects/dot-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/dottedLoader/dottedLoader.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 5px dotted #FFF; 5 | border-radius: 50%; 6 | display: inline-block; 7 | position: relative; 8 | box-sizing: border-box; 9 | animation: rotation 2s linear infinite; 10 | } 11 | 12 | @keyframes rotation { 13 | 0% { 14 | transform: rotate(0deg); 15 | } 16 | 100% { 17 | transform: rotate(360deg); 18 | } 19 | } -------------------------------------------------------------------------------- /projects/dottedLoader/dottedLoader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/double-filled loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mesh-Loader 9 | 10 | 11 |
Made by Shubhajeet Pradhan
12 |

13 | 14 | 15 | 16 | 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projects/double-filled loader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | display:inline-block; 4 | height: 46px; 5 | width: 46px; 6 | margin-left: 50%; 7 | border-radius: 50%; 8 | background: none repeat scroll 0 0 #DDDDDD; 9 | overflow:hidden; 10 | box-shadow: 0 0 10px rgba(0,0,0,.1) inset, 0 0 25px rgba(0,0,255,0.075); 11 | } 12 | 13 | .loader:after { 14 | content: ""; 15 | position: absolute; 16 | top: 9px; left: 9px; 17 | display: block; 18 | height: 28px; width: 28px; 19 | background: none repeat scroll 0 0 #F2F2F2; 20 | border-radius: 50%; 21 | box-shadow: 0 0 10px rgba(0,0,0,.1); 22 | } 23 | .loader > span { 24 | position: absolute; 25 | height: 100%; width: 50%; 26 | overflow: hidden; 27 | } 28 | .left { left:0 } 29 | .right { left:50% } 30 | 31 | .anim { 32 | position: absolute; 33 | left: 100%; top: 0; 34 | height: 100%; width: 100%; 35 | border-radius: 999px; 36 | background: none repeat scroll 0 0 rgb(255, 95, 95); 37 | opacity: 0.8; 38 | -webkit-animation: ui-spinner-rotate-left 3s infinite; 39 | animation: ui-spinner-rotate-left 3s infinite; 40 | -webkit-transform-origin: 0 50% 0; 41 | transform-origin: 0 50% 0; 42 | } 43 | .left .anim { 44 | border-bottom-left-radius: 0; 45 | border-top-left-radius: 0; 46 | } 47 | .right .anim { 48 | border-bottom-right-radius: 0; 49 | border-top-right-radius: 0; 50 | left: -100%; 51 | -webkit-transform-origin: 100% 50% 0; 52 | transform-origin: 100% 50% 0; 53 | } 54 | 55 | .loader3 .anim { 56 | -webkit-animation-delay: 0s; 57 | -webkit-animation-duration:3s; 58 | -webkit-animation-timing-function: linear; 59 | animation-delay: 0s; 60 | animation-duration:3s; 61 | animation-timing-function: linear; 62 | } 63 | .loader3 .right .anim{ 64 | -webkit-animation-name: ui-spinner-rotate-right; 65 | -webkit-animation-delay:0; 66 | -webkit-animation-delay: 1.5s; 67 | animation-name: ui-spinner-rotate-right; 68 | animation-delay:0; 69 | animation-delay: 1.5s; 70 | } 71 | 72 | /* round variation */ 73 | .round .loader:after {display:none } 74 | 75 | /* double variation */ 76 | .double .loader:after { 77 | height: 13px; width: 13px; 78 | left: 7px; top: 7px; 79 | border: 10px solid #ddd; 80 | background: transparent; 81 | box-shadow: none; 82 | } 83 | 84 | @keyframes ui-spinner-rotate-right{ 85 | 0%{transform:rotate(0deg)} 86 | 25%{transform:rotate(180deg)} 87 | 50%{transform:rotate(180deg)} 88 | 75%{transform:rotate(360deg)} 89 | 100%{transform:rotate(360deg)} 90 | } 91 | @keyframes ui-spinner-rotate-left{ 92 | 0%{transform:rotate(0deg)} 93 | 25%{transform:rotate(0deg)} 94 | 50%{transform:rotate(180deg)} 95 | 75%{transform:rotate(180deg)} 96 | 100%{transform:rotate(360deg)} 97 | } 98 | 99 | @-webkit-keyframes ui-spinner-rotate-right{ 100 | 0%{-webkit-transform:rotate(0deg)} 101 | 25%{-webkit-transform:rotate(180deg)} 102 | 50%{-webkit-transform:rotate(180deg)} 103 | 75%{-webkit-transform:rotate(360deg)} 104 | 100%{-webkit-transform:rotate(360deg)} 105 | } 106 | @-webkit-keyframes ui-spinner-rotate-left{ 107 | 0%{-webkit-transform:rotate(0deg)} 108 | 25%{-webkit-transform:rotate(0deg)} 109 | 50%{-webkit-transform:rotate(180deg)} 110 | 75%{-webkit-transform:rotate(180deg)} 111 | 100%{-webkit-transform:rotate(360deg)} 112 | } -------------------------------------------------------------------------------- /projects/double_ball_loader/index.css: -------------------------------------------------------------------------------- 1 | .cp-wrapper{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 97vh; 6 | } 7 | .cp-spinner { 8 | width: 100px; 9 | height: 100px; 10 | display: inline-block; 11 | box-sizing: border-box; 12 | position: relative; 13 | } 14 | .cp-round:before { 15 | border-radius: 50%; 16 | content: " "; 17 | width: 100px; 18 | height: 100px; 19 | display: inline-block; 20 | box-sizing: border-box; 21 | border-top: solid 6px #bababa; 22 | border-right: solid 6px #bababa; 23 | border-bottom: solid 6px #bababa; 24 | border-left: solid 6px #bababa; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | } 29 | .cp-round:after { 30 | border-radius: 50%; 31 | content: " "; 32 | width: 100px; 33 | height: 100px; 34 | display: inline-block; 35 | box-sizing: border-box; 36 | border-top: solid 6px #f56151; 37 | border-right: solid 6px transparent; 38 | border-bottom: solid 6px transparent; 39 | border-left: solid 6px transparent; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | animation: cp-round-animate 1s ease-in-out infinite; 44 | } 45 | @keyframes cp-round-animate { 46 | 0% { 47 | transform: rotate(0); 48 | } 49 | 100% { 50 | transform: rotate(360deg); 51 | } 52 | } 53 | .cp-pinwheel { 54 | border-radius: 50%; 55 | width: 48px; 56 | height: 48px; 57 | display: inline-block; 58 | box-sizing: border-box; 59 | border-top: solid 24px #0fd6ff; 60 | border-right: solid 24px #58bd55; 61 | border-bottom: solid 24px #eb68a1; 62 | border-left: solid 24px #f3d53f; 63 | animation: cp-pinwheel-animate 1s linear infinite; 64 | } 65 | @keyframes cp-pinwheel-animate { 66 | 0% { 67 | border-top-color: #0fd6ff; 68 | border-right-color: #58bd55; 69 | border-bottom-color: #eb68a1; 70 | border-left-color: #f3d53f; 71 | transform: rotate(0); 72 | } 73 | 25% { 74 | border-top-color: #eb68a1; 75 | border-right-color: #f3d53f; 76 | border-bottom-color: #0fd6ff; 77 | border-left-color: #58bd55; 78 | } 79 | 50% { 80 | border-top-color: #0fd6ff; 81 | border-right-color: #58bd55; 82 | border-bottom-color: #eb68a1; 83 | border-left-color: #f3d53f; 84 | } 85 | 75% { 86 | border-top-color: #eb68a1; 87 | border-right-color: #f3d53f; 88 | border-bottom-color: #0fd6ff; 89 | border-left-color: #58bd55; 90 | } 91 | 100% { 92 | border-top-color: #0fd6ff; 93 | border-right-color: #58bd55; 94 | border-bottom-color: #eb68a1; 95 | border-left-color: #f3d53f; 96 | transform: rotate(360deg); 97 | } 98 | } 99 | .cp-balls { 100 | animation: cp-balls-animate 1s linear infinite; 101 | } 102 | .cp-balls:before { 103 | border-radius: 50%; 104 | content: " "; 105 | width: 24px; 106 | height: 24px; 107 | display: inline-block; 108 | box-sizing: border-box; 109 | background-color: #0fd6ff; 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | animation: cp-balls-animate-before 1s ease-in-out infinite; 114 | } 115 | .cp-balls:after { 116 | border-radius: 50%; 117 | content: " "; 118 | width: 24px; 119 | height: 24px; 120 | display: inline-block; 121 | box-sizing: border-box; 122 | background-color: #eb68a1; 123 | position: absolute; 124 | bottom: 0; 125 | right: 0; 126 | animation: cp-balls-animate-after 1s ease-in-out infinite; 127 | } 128 | @keyframes cp-balls-animate { 129 | 0% { 130 | transform: rotate(0); 131 | } 132 | 100% { 133 | transform: rotate(360deg); 134 | } 135 | } 136 | @keyframes cp-balls-animate-before { 137 | 0% { 138 | transform: translate(-5px, -5px); 139 | } 140 | 50% { 141 | transform: translate(0, 0); 142 | } 143 | 100% { 144 | transform: translate(-5px, -5px); 145 | } 146 | } 147 | @keyframes cp-balls-animate-after { 148 | 0% { 149 | transform: translate(5px, 5px); 150 | } 151 | 50% { 152 | transform: translate(0, 0); 153 | } 154 | 100% { 155 | transform: translate(5px, 5px); 156 | } 157 | } 158 | .cp-bubble { 159 | border-radius: 50%; 160 | width: 24px; 161 | height: 24px; 162 | display: inline-block; 163 | box-sizing: border-box; 164 | background: #58bd55; 165 | animation: cp-bubble-animate 1s linear infinite; 166 | } 167 | .cp-bubble:before { 168 | border-radius: 50%; 169 | content: " "; 170 | width: 24px; 171 | height: 24px; 172 | display: inline-block; 173 | box-sizing: border-box; 174 | background-color: #58bd55; 175 | position: absolute; 176 | left: -30px; 177 | animation: cp-bubble-animate-before 1s ease-in-out infinite; 178 | } 179 | .cp-bubble:after { 180 | border-radius: 50%; 181 | content: " "; 182 | width: 24px; 183 | height: 24px; 184 | display: inline-block; 185 | box-sizing: border-box; 186 | background-color: #58bd55; 187 | position: absolute; 188 | right: -30px; 189 | animation: cp-bubble-animate-after 1s ease-in-out infinite; 190 | } 191 | @keyframes cp-bubble-animate { 192 | 0% { 193 | opacity: 0.5; 194 | transform: scale(1) translateX(0); 195 | } 196 | 25% { 197 | opacity: 1; 198 | transform: scale(1.1) translateX(-15px); 199 | } 200 | 50% { 201 | opacity: 1; 202 | transform: scale(1.2) translateX(15px); 203 | } 204 | 100% { 205 | opacity: 0.5; 206 | transform: scale(1) translateX(0); 207 | } 208 | } 209 | @keyframes cp-bubble-animate-before { 210 | 0% { 211 | opacity: 0.5; 212 | transform: scale(1); 213 | } 214 | 25% { 215 | transform: scale(1.1); 216 | } 217 | 100%, 218 | 50% { 219 | opacity: 1; 220 | transform: scale(1); 221 | } 222 | } 223 | @keyframes cp-bubble-animate-after { 224 | 0%, 225 | 50% { 226 | opacity: 0.5; 227 | transform: scale(1); 228 | } 229 | 50% { 230 | transform: scale(1.1); 231 | } 232 | 100%, 233 | 75% { 234 | opacity: 1; 235 | transform: scale(1); 236 | } 237 | } 238 | .cp-flip { 239 | transform-style: preserve-3d; 240 | perspective: 10em; 241 | } 242 | .cp-flip:before { 243 | width: 48px; 244 | height: 48px; 245 | display: inline-block; 246 | box-sizing: border-box; 247 | background: #f56151; 248 | content: " "; 249 | position: absolute; 250 | top: 0; 251 | left: 0; 252 | animation: cp-flip-animate-before 2s linear infinite; 253 | } 254 | @keyframes cp-flip-animate-before { 255 | 0% { 256 | transform: rotateY(0) rotateX(0); 257 | } 258 | 25% { 259 | transform: rotateY(360deg) rotateX(0); 260 | } 261 | 50% { 262 | transform: rotateY(360deg) rotateX(360deg); 263 | } 264 | 75% { 265 | transform: rotateY(0) rotateX(360deg); 266 | } 267 | 100% { 268 | transform: rotateY(0) rotateX(0); 269 | } 270 | } 271 | .cp-hue { 272 | width: 24px; 273 | height: 24px; 274 | display: inline-block; 275 | box-sizing: border-box; 276 | background: #f56151; 277 | border-radius: 50%; 278 | animation: cp-hue-animate 1s ease-in-out infinite; 279 | } 280 | .cp-hue:before { 281 | border-radius: 0 12px 12px 0; 282 | content: " "; 283 | width: 12px; 284 | height: 24px; 285 | display: inline-block; 286 | box-sizing: border-box; 287 | background: #fff; 288 | position: absolute; 289 | top: 0; 290 | right: 0; 291 | animation: cp-hue-animate-before 1s ease-in-out infinite; 292 | } 293 | @keyframes cp-hue-animate { 294 | 0% { 295 | background: #f56151; 296 | } 297 | 25% { 298 | background: #58bd55; 299 | } 300 | 50% { 301 | background: #eb68a1; 302 | } 303 | 75% { 304 | background: #f3d53f; 305 | } 306 | 100% { 307 | background: #f56151; 308 | } 309 | } 310 | @keyframes cp-hue-animate-before { 311 | 0% { 312 | transform: rotateY(0); 313 | transform-origin: left center; 314 | opacity: 0.5; 315 | } 316 | 30%, 317 | 70% { 318 | transform: rotateY(180deg); 319 | transform-origin: left center; 320 | opacity: 0.2; 321 | } 322 | 100% { 323 | transform: rotateY(0); 324 | opacity: 0.5; 325 | } 326 | } 327 | .cp-skeleton { 328 | border-radius: 50%; 329 | border-top: solid 6px #f56151; 330 | border-right: solid 6px transparent; 331 | border-bottom: solid 6px transparent; 332 | border-left: solid 6px transparent; 333 | animation: cp-skeleton-animate 1s linear infinite; 334 | } 335 | .cp-skeleton:before { 336 | border-radius: 50%; 337 | content: " "; 338 | width: 48px; 339 | height: 48px; 340 | display: inline-block; 341 | box-sizing: border-box; 342 | border-top: solid 6px transparent; 343 | border-right: solid 6px transparent; 344 | border-bottom: solid 6px transparent; 345 | border-left: solid 6px #f56151; 346 | position: absolute; 347 | top: -6px; 348 | left: -6px; 349 | transform: rotateZ(-30deg); 350 | } 351 | .cp-skeleton:after { 352 | border-radius: 50%; 353 | content: " "; 354 | width: 48px; 355 | height: 48px; 356 | display: inline-block; 357 | box-sizing: border-box; 358 | border-top: solid 6px transparent; 359 | border-right: solid 6px #f56151; 360 | border-bottom: solid 6px transparent; 361 | border-left: solid 6px transparent; 362 | position: absolute; 363 | top: -6px; 364 | right: -6px; 365 | transform: rotateZ(30deg); 366 | } 367 | @keyframes cp-skeleton-animate { 368 | 0% { 369 | transform: rotate(0); 370 | opacity: 1; 371 | } 372 | 50% { 373 | opacity: 0.7; 374 | } 375 | 100% { 376 | transform: rotate(360deg); 377 | opacity: 1; 378 | } 379 | } 380 | .cp-eclipse { 381 | width: 12px; 382 | height: 12px; 383 | display: inline-block; 384 | box-sizing: border-box; 385 | border-radius: 50%; 386 | background: #f3d53f; 387 | margin: 12px; 388 | animation: cp-eclipse-animate 1s ease-out infinite; 389 | } 390 | .cp-eclipse:before { 391 | border-radius: 50%; 392 | content: " "; 393 | width: 48px; 394 | height: 48px; 395 | display: inline-block; 396 | box-sizing: border-box; 397 | border-top: solid 6px transparent; 398 | border-right: solid 6px #f3d53f; 399 | border-bottom: solid 6px transparent; 400 | border-left: solid 6px transparent; 401 | position: absolute; 402 | top: -18px; 403 | left: -18px; 404 | } 405 | .cp-eclipse:after { 406 | border-radius: 50%; 407 | content: " "; 408 | width: 48px; 409 | height: 48px; 410 | display: inline-block; 411 | box-sizing: border-box; 412 | border-top: solid 6px transparent; 413 | border-right: solid 6px transparent; 414 | border-bottom: solid 6px transparent; 415 | border-left: solid 6px #f3d53f; 416 | position: absolute; 417 | top: -18px; 418 | right: -18px; 419 | } 420 | @keyframes cp-eclipse-animate { 421 | 0% { 422 | transform: rotate(0); 423 | } 424 | 100% { 425 | transform: rotate(360deg); 426 | } 427 | } 428 | .cp-boxes:before { 429 | width: 24px; 430 | height: 24px; 431 | display: inline-block; 432 | box-sizing: border-box; 433 | content: " "; 434 | background: #58bd55; 435 | position: absolute; 436 | top: 12px; 437 | left: 0; 438 | animation: cp-boxes-animate-before 1s ease-in-out infinite; 439 | } 440 | .cp-boxes:after { 441 | width: 24px; 442 | height: 24px; 443 | display: inline-block; 444 | box-sizing: border-box; 445 | content: " "; 446 | background: #58bd55; 447 | position: absolute; 448 | top: 12px; 449 | right: 0; 450 | animation: cp-boxes-animate-after 1s ease-in-out infinite; 451 | } 452 | @keyframes cp-boxes-animate-before { 453 | 0% { 454 | transform: translateX(-24px) rotate(45deg); 455 | } 456 | 50% { 457 | transform: translateX(-8px) rotate(225deg); 458 | } 459 | 100% { 460 | transform: translateX(-24px) rotate(45deg); 461 | } 462 | } 463 | @keyframes cp-boxes-animate-after { 464 | 0% { 465 | transform: translateX(24px) rotate(45deg); 466 | } 467 | 50% { 468 | transform: translateX(8px) rotate(-225deg); 469 | } 470 | 100% { 471 | transform: translateX(24px) rotate(45deg); 472 | } 473 | } 474 | .cp-morph { 475 | width: 48px; 476 | height: 48px; 477 | display: inline-block; 478 | box-sizing: border-box; 479 | background: #0fd6ff; 480 | animation: cp-morph-animate 1s linear infinite; 481 | } 482 | @keyframes cp-morph-animate { 483 | 0% { 484 | transform: rotate(0) scale(1); 485 | border-radius: 0; 486 | background: #f3d53f; 487 | } 488 | 25%, 489 | 75% { 490 | transform: rotate(180deg) scale(0.4); 491 | border-radius: 50%; 492 | background: #0fd6ff; 493 | } 494 | 100% { 495 | transform: rotate(360deg) scale(1); 496 | border-radius: 0; 497 | background: #f3d53f; 498 | } 499 | } 500 | .cp-heart { 501 | animation: cp-heart-animate 2s ease-in-out infinite; 502 | } 503 | .cp-heart:before { 504 | border-radius: 12px 12px 0 0; 505 | content: " "; 506 | width: 24px; 507 | height: 35px; 508 | display: inline-block; 509 | box-sizing: border-box; 510 | background-color: #eb68a1; 511 | transform: rotate(-45deg); 512 | position: absolute; 513 | top: 0; 514 | left: 8px; 515 | } 516 | .cp-heart:after { 517 | border-radius: 12px 12px 0 0; 518 | content: " "; 519 | width: 24px; 520 | height: 35px; 521 | display: inline-block; 522 | box-sizing: border-box; 523 | background-color: #eb68a1; 524 | transform: rotate(45deg); 525 | position: absolute; 526 | top: 0; 527 | right: 8px; 528 | } 529 | @keyframes cp-heart-animate { 530 | 0% { 531 | transform: scale(0.9); 532 | transform-origin: center; 533 | } 534 | 15% { 535 | transform: scale(1.4); 536 | transform-origin: center; 537 | } 538 | 30% { 539 | transform: scale(0.9); 540 | transform-origin: center; 541 | } 542 | 45% { 543 | transform: scale(1.4); 544 | transform-origin: center; 545 | } 546 | 100%, 547 | 60% { 548 | transform: scale(0.9); 549 | transform-origin: center; 550 | } 551 | } 552 | .cp-meter { 553 | border-radius: 50%; 554 | border-top: solid 6px #0fd6ff; 555 | border-right: solid 6px #0fd6ff; 556 | border-bottom: solid 6px #0fd6ff; 557 | border-left: solid 6px #0fd6ff; 558 | width: 48px; 559 | height: 48px; 560 | display: inline-block; 561 | box-sizing: border-box; 562 | } 563 | .cp-meter:before { 564 | border-radius: 3px; 565 | content: " "; 566 | width: 6px; 567 | height: 12px; 568 | display: inline-block; 569 | box-sizing: border-box; 570 | background-color: #0fd6ff; 571 | position: absolute; 572 | top: 5px; 573 | left: 16px; 574 | transform-origin: center bottom; 575 | animation: cp-meter-animate-before 1s linear infinite; 576 | } 577 | @keyframes cp-meter-animate-before { 578 | 0% { 579 | transform: rotate(-45deg); 580 | } 581 | 100% { 582 | transform: rotate(315deg); 583 | } 584 | } 585 | -------------------------------------------------------------------------------- /projects/double_ball_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSSPIN - CSS Spinners and Loaders 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 19 | 20 |
21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /projects/double_loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | display: inline-block; 6 | position: relative; 7 | border: 3px solid; 8 | border-color: #FFF #FFF transparent; 9 | box-sizing: border-box; 10 | animation: rotation 1s linear infinite; 11 | } 12 | .loader::after { 13 | content: ''; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 0; 17 | right: 0; 18 | top: 0; 19 | bottom: 0; 20 | margin: auto; 21 | border: 3px solid; 22 | border-color: transparent #FF3D00 #FF3D00; 23 | width: 24px; 24 | height: 24px; 25 | border-radius: 50%; 26 | animation: rotationBack 0.5s linear infinite; 27 | transform-origin: center center; 28 | } 29 | 30 | @keyframes rotation { 31 | 0% { 32 | transform: rotate(0deg); 33 | } 34 | 100% { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | @keyframes rotationBack { 40 | 0% { 41 | transform: rotate(0deg); 42 | } 43 | 100% { 44 | transform: rotate(-360deg); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/double_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/flat loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flat Loader 9 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /projects/honey-comb-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Honey-Comb-Loader 9 | 10 | 11 |
Made by Shubhajeet Pradhan
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 | 201 |
202 | 203 | 204 | 205 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /projects/honey-comb-loader/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #DBE1EF; 3 | } 4 | 5 | .honey_comb{ 6 | width: 200px; 7 | height: 200px; 8 | position: absolute; 9 | left: 50%; 10 | margin-left: -100px; 11 | top: 50%; 12 | margin-top: -100px; 13 | } 14 | 15 | .hex-brick{ 16 | background: #F36B59; 17 | width: 30px; 18 | height: 17px; 19 | position: absolute; 20 | top: 5px; 21 | animation-name: fade; 22 | animation-duration: 2s; 23 | animation-iteration-count: infinite; 24 | -webkit-animation-name: fade; 25 | -webkit-animation-duration: 2s; 26 | -webkit-animation-iteration-count: infinite; 27 | } 28 | 29 | .h2{ 30 | transform: rotate(60deg); 31 | -webkit-transform: rotate(60deg); 32 | } 33 | 34 | .h3{ 35 | transform: rotate(-60deg); 36 | -webkit-transform: rotate(-60deg); 37 | } 38 | 39 | .hex{ 40 | height: 30px; 41 | width: 30px; 42 | transition: all .3s; 43 | -webkit-transition: all .3s; 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | } 48 | 49 | .center-hex{ 50 | margin-left: -15px; 51 | margin-top: -15px; 52 | 53 | animation-name: pulse; 54 | animation-duration: 2s; 55 | animation-iteration-count: infinite; 56 | -webkit-animation-name: pulse; 57 | -webkit-animation-duration: 2s; 58 | -webkit-animation-iteration-count: infinite; 59 | } 60 | 61 | .c1{ 62 | margin-left: -47px; 63 | margin-top: -15px; 64 | } 65 | 66 | .c2{ 67 | margin-left: -31px; 68 | margin-top: -43px; 69 | } 70 | 71 | .c3{ 72 | margin-left: 1px; 73 | margin-top: -43px; 74 | } 75 | 76 | .c4{ 77 | margin-left: 17px; 78 | margin-top: -15px; 79 | } 80 | .c5{ 81 | margin-left: -31px; 82 | margin-top: 13px; 83 | } 84 | 85 | .c6{ 86 | margin-left: 1px; 87 | margin-top: 13px; 88 | } 89 | 90 | .c7{ 91 | margin-left: -63px; 92 | margin-top: -43px; 93 | } 94 | 95 | .c8{ 96 | margin-left: 33px; 97 | margin-top: -43px; 98 | } 99 | 100 | .c9{ 101 | margin-left: -15px; 102 | margin-top: 41px; 103 | } 104 | 105 | .c10{ 106 | margin-left: -63px; 107 | margin-top: 13px; 108 | } 109 | 110 | .c11{ 111 | margin-left: 33px; 112 | margin-top: 13px; 113 | } 114 | 115 | .c12{ 116 | margin-left: -15px; 117 | margin-top: -71px; 118 | } 119 | 120 | .c13{ 121 | margin-left: -47px; 122 | margin-top: -71px; 123 | } 124 | 125 | .c14{ 126 | margin-left: 17px; 127 | margin-top: -71px; 128 | } 129 | 130 | .c15{ 131 | margin-left: -47px; 132 | margin-top: 41px; 133 | } 134 | 135 | .c16{ 136 | margin-left: 17px; 137 | margin-top: 41px; 138 | } 139 | 140 | .c17{ 141 | margin-left: -79px; 142 | margin-top: -15px; 143 | } 144 | 145 | .c18{ 146 | margin-left: 49px; 147 | margin-top: -15px; 148 | } 149 | 150 | .c19{ 151 | margin-left: -63px; 152 | margin-top: -99px; 153 | } 154 | 155 | .c20{ 156 | margin-left: 33px; 157 | margin-top: -99px; 158 | } 159 | 160 | .c21{ 161 | margin-left: 1px; 162 | margin-top: -99px; 163 | } 164 | 165 | .c22{ 166 | margin-left: -31px; 167 | margin-top: -99px; 168 | } 169 | 170 | .c23{ 171 | margin-left: -63px; 172 | margin-top: 69px; 173 | } 174 | 175 | .c24{ 176 | margin-left: 33px; 177 | margin-top: 69px; 178 | } 179 | 180 | .c25{ 181 | margin-left: 1px; 182 | margin-top: 69px; 183 | } 184 | 185 | .c26{ 186 | margin-left: -31px; 187 | margin-top: 69px; 188 | } 189 | 190 | .c27{ 191 | margin-left: -79px; 192 | margin-top: -15px; 193 | } 194 | 195 | .c28{ 196 | margin-left: -95px; 197 | margin-top: -43px; 198 | } 199 | 200 | .c29{ 201 | margin-left: -95px; 202 | margin-top: 13px; 203 | } 204 | 205 | .c30{ 206 | margin-left: 49px; 207 | margin-top: 41px; 208 | } 209 | 210 | .c31{ 211 | margin-left: -79px; 212 | margin-top: -71px; 213 | } 214 | 215 | .c32{ 216 | margin-left: -111px; 217 | margin-top: -15px; 218 | } 219 | 220 | .c33{ 221 | margin-left: 65px; 222 | margin-top: -43px; 223 | } 224 | 225 | .c34{ 226 | margin-left: 65px; 227 | margin-top: 13px; 228 | } 229 | 230 | .c35{ 231 | margin-left: -79px; 232 | margin-top: 41px; 233 | } 234 | 235 | .c36{ 236 | margin-left: 49px; 237 | margin-top: -71px; 238 | } 239 | 240 | .c37{ 241 | margin-left: 81px; 242 | margin-top: -15px; 243 | } 244 | 245 | .r1{ 246 | animation-name: pulse; 247 | animation-duration: 2s; 248 | animation-iteration-count: infinite; 249 | animation-delay: .2s; 250 | -webkit-animation-name: pulse; 251 | -webkit-animation-duration: 2s; 252 | -webkit-animation-iteration-count: infinite; 253 | -webkit-animation-delay: .2s; 254 | } 255 | 256 | .r2{ 257 | animation-name: pulse; 258 | animation-duration: 2s; 259 | animation-iteration-count: infinite; 260 | animation-delay: .4s; 261 | -webkit-animation-name: pulse; 262 | -webkit-animation-duration: 2s; 263 | -webkit-animation-iteration-count: infinite; 264 | -webkit-animation-delay: .4s; 265 | } 266 | 267 | .r3{ 268 | animation-name: pulse; 269 | animation-duration: 2s; 270 | animation-iteration-count: infinite; 271 | animation-delay: .6s; 272 | -webkit-animation-name: pulse; 273 | -webkit-animation-duration: 2s; 274 | -webkit-animation-iteration-count: infinite; 275 | -webkit-animation-delay: .6s; 276 | } 277 | 278 | .r1 > .hex-brick{ 279 | animation-name: fade; 280 | animation-duration: 2s; 281 | animation-iteration-count: infinite; 282 | animation-delay: .2s; 283 | -webkit-animation-name: fade; 284 | -webkit-animation-duration: 2s; 285 | -webkit-animation-iteration-count: infinite; 286 | -webkit-animation-delay: .2s; 287 | } 288 | 289 | .r2 > .hex-brick{ 290 | animation-name: fade; 291 | animation-duration: 2s; 292 | animation-iteration-count: infinite; 293 | animation-delay: .4s; 294 | -webkit-animation-name: fade; 295 | -webkit-animation-duration: 2s; 296 | -webkit-animation-iteration-count: infinite; 297 | -webkit-animation-delay: .4s; 298 | } 299 | 300 | .r3 > .hex-brick{ 301 | animation-name: fade; 302 | animation-duration: 2s; 303 | animation-iteration-count: infinite; 304 | animation-delay: .6s; 305 | -webkit-animation-name: fade; 306 | -webkit-animation-duration: 2s; 307 | -webkit-animation-iteration-count: infinite; 308 | -webkit-animation-delay: .6s; 309 | } 310 | 311 | 312 | @keyframes pulse{ 313 | 0%{ 314 | -webkit-transform: scale(1); 315 | transform: scale(1); 316 | } 317 | 318 | 50%{ 319 | -webkit-transform: scale(0.01); 320 | transform: scale(0.01); 321 | } 322 | 323 | 100%{ 324 | -webkit-transform: scale(1); 325 | transform: scale(1); 326 | } 327 | } 328 | 329 | @keyframes fade{ 330 | 0%{ 331 | background: #F36B59; 332 | } 333 | 334 | 50%{ 335 | background: #FFA0AD; 336 | } 337 | 338 | 100%{ 339 | background: #F36B59; 340 | } 341 | } 342 | 343 | @-webkit-keyframes pulse{ 344 | 0%{ 345 | -webkit-transform: scale(1); 346 | transform: scale(1); 347 | } 348 | 349 | 50%{ 350 | -webkit-transform: scale(0.01); 351 | transform: scale(0.01); 352 | } 353 | 354 | 100%{ 355 | -webkit-transform: scale(1); 356 | transform: scale(1); 357 | } 358 | } 359 | 360 | @-webkit-keyframes fade{ 361 | 0%{ 362 | background: #F36B59; 363 | } 364 | 365 | 50%{ 366 | background: #FFA0AD; 367 | } 368 | 369 | 100%{ 370 | background: #F36B59; 371 | } 372 | } -------------------------------------------------------------------------------- /projects/kinetic-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kinetic Loader 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/kinetic-loader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #2c3e50; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | 15 | .kinetic { 16 | position: relative; 17 | height: 80px; 18 | width: 80px; 19 | } 20 | 21 | .kinetic::after, 22 | .kinetic::before { 23 | content: ''; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 0; 28 | height: 0; 29 | border: 50px solid transparent; 30 | border-bottom-color: #fff; 31 | animation: rotateA 2s linear infinite 0.5s; 32 | } 33 | 34 | .kinetic::before { 35 | transform: rotate(90deg); 36 | animation: rotateB 2s linear infinite; 37 | } 38 | 39 | @keyframes rotateA { 40 | 0%, 41 | 25% { 42 | transform: rotate(0deg); 43 | } 44 | 45 | 50%, 46 | 75% { 47 | transform: rotate(180deg); 48 | } 49 | 50 | 100% { 51 | transform: rotate(360deg); 52 | } 53 | } 54 | 55 | @keyframes rotateB { 56 | 0%, 57 | 25% { 58 | transform: rotate(90deg); 59 | } 60 | 61 | 50%, 62 | 75% { 63 | transform: rotate(270deg); 64 | } 65 | 66 | 100% { 67 | transform: rotate(450deg); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /projects/loader/indexx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Loader 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/loader/style.css: -------------------------------------------------------------------------------- 1 | .lds-hourglass { 2 | display: inline-block; 3 | position: relative; 4 | width: 80px; 5 | height: 80px; 6 | } 7 | 8 | .lds-hourglass:after { 9 | content: " "; 10 | display: block; 11 | border-radius: 50%; 12 | width: 0; 13 | height: 0; 14 | margin: 8px; 15 | box-sizing: border-box; 16 | border: 32px solid rgb(10, 7, 7); 17 | border-color: rgb(7, 4, 4) transparent rgb(11, 8, 8) transparent; 18 | animation: lds-hourglass 1.2s infinite; 19 | } 20 | 21 | @keyframes lds-hourglass { 22 | 0% { 23 | transform: rotate(0); 24 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 25 | } 26 | 27 | 50% { 28 | transform: rotate(900deg); 29 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 30 | } 31 | 32 | 100% { 33 | transform: rotate(1800deg); 34 | } 35 | } -------------------------------------------------------------------------------- /projects/loader_circle/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | position: relative; 6 | animation: rotate 1s linear infinite 7 | } 8 | .loader::before , .loader::after { 9 | content: ""; 10 | box-sizing: border-box; 11 | position: absolute; 12 | inset: 0px; 13 | border-radius: 50%; 14 | border: 5px solid #FFF; 15 | animation: prixClipFix 2s linear infinite ; 16 | } 17 | .loader::after{ 18 | border-color: #FF3D00; 19 | animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse; 20 | inset: 6px; 21 | } 22 | 23 | @keyframes rotate { 24 | 0% {transform: rotate(0deg)} 25 | 100% {transform: rotate(360deg)} 26 | } 27 | 28 | @keyframes prixClipFix { 29 | 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} 30 | 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} 31 | 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} 32 | 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} 33 | 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} 34 | } -------------------------------------------------------------------------------- /projects/loader_circle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/loader_circle_dots/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 2px solid #FFF; 5 | border-radius: 50%; 6 | display: inline-block; 7 | position: relative; 8 | box-sizing: border-box; 9 | animation: rotation 1s linear infinite; 10 | } 11 | .loader::after, 12 | .loader::before { 13 | content: ''; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 0; 17 | top: 0; 18 | background: #FF3D00; 19 | width: 6px; 20 | height: 6px; 21 | transform: translate(150%, 150%); 22 | border-radius: 50%; 23 | } 24 | .loader::before { 25 | left: auto; 26 | top: auto; 27 | right: 0; 28 | bottom: 0; 29 | transform: translate(-150%, -150%); 30 | } 31 | 32 | @keyframes rotation { 33 | 0% { 34 | transform: rotate(0deg); 35 | } 36 | 100% { 37 | transform: rotate(360deg); 38 | } 39 | } -------------------------------------------------------------------------------- /projects/loader_circle_dots/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/loader_dots/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | color: #000; 3 | font-size: 30px; 4 | width: 1rem; 5 | height: 1rem; 6 | border-radius: 100%; 7 | position: relative; 8 | text-indent: -9999em; 9 | animation: mulShdSpin 1.3s infinite linear; 10 | transform: translateZ(0); 11 | top: 50%; 12 | left: 50%; 13 | } 14 | 15 | @keyframes mulShdSpin { 16 | 0%, 17 | 100% { 18 | box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 19 | 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; 20 | } 21 | 12.5% { 22 | box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 23 | 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 24 | } 25 | 25% { 26 | box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 27 | 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; 28 | } 29 | 37.5% { 30 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 31 | 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; 32 | } 33 | 50% { 34 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 35 | 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; 36 | } 37 | 62.5% { 38 | box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 39 | 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; 40 | } 41 | 75% { 42 | box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 43 | 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; 44 | } 45 | 87.5% { 46 | box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 47 | 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /projects/loader_dots/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/loader_double_circle/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 3px solid #FFF; 5 | border-radius: 50%; 6 | display: inline-block; 7 | position: relative; 8 | box-sizing: border-box; 9 | animation: rotation 1s linear infinite; 10 | } 11 | .loader::after { 12 | content: ''; 13 | box-sizing: border-box; 14 | position: absolute; 15 | left: 50%; 16 | top: 50%; 17 | transform: translate(-50%, -50%); 18 | width: 40px; 19 | height: 40px; 20 | border-radius: 50%; 21 | border: 3px solid; 22 | border-color: #FF3D00 transparent; 23 | } 24 | 25 | @keyframes rotation { 26 | 0% { 27 | transform: rotate(0deg); 28 | } 29 | 100% { 30 | transform: rotate(360deg); 31 | } 32 | } -------------------------------------------------------------------------------- /projects/loader_double_circle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/loading loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | loading 9 | 10 | 11 | Loading 12 | 13 | -------------------------------------------------------------------------------- /projects/loading loader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | font-size: 48px; 3 | display: inline-block; 4 | font-family: Arial, Helvetica, sans-serif; 5 | font-weight: bold; 6 | color: #FF3D00; 7 | letter-spacing: 2px; 8 | position: relative; 9 | } 10 | .loader::after { 11 | content: 'Loading'; 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | color: #FFF; 16 | width: 100%; 17 | height: 100%; 18 | overflow: hidden; 19 | box-sizing: border-box; 20 | animation: animloader 10s ease-in infinite; 21 | } 22 | 23 | @keyframes animloader { 24 | 0% { 25 | width: 0%; 26 | } 27 | 100% { 28 | width: 100%; 29 | } 30 | } -------------------------------------------------------------------------------- /projects/loveLoader/loveLoader.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | transform: rotateZ(45deg); 3 | perspective: 1000px; 4 | border-radius: 50%; 5 | width: 48px; 6 | height: 48px; 7 | color: #fff; 8 | } 9 | .loader:before, 10 | .loader:after { 11 | content: ''; 12 | display: block; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | width: inherit; 17 | height: inherit; 18 | border-radius: 50%; 19 | transform: rotateX(70deg); 20 | animation: 1s spin linear infinite; 21 | } 22 | .loader:after { 23 | color: #FF3D00; 24 | transform: rotateY(70deg); 25 | animation-delay: .4s; 26 | } 27 | 28 | @keyframes rotate { 29 | 0% { 30 | transform: translate(-50%, -50%) rotateZ(0deg); 31 | } 32 | 100% { 33 | transform: translate(-50%, -50%) rotateZ(360deg); 34 | } 35 | } 36 | 37 | @keyframes rotateccw { 38 | 0% { 39 | transform: translate(-50%, -50%) rotate(0deg); 40 | } 41 | 100% { 42 | transform: translate(-50%, -50%) rotate(-360deg); 43 | } 44 | } 45 | 46 | @keyframes spin { 47 | 0%, 48 | 100% { 49 | box-shadow: .2em 0px 0 0px currentcolor; 50 | } 51 | 12% { 52 | box-shadow: .2em .2em 0 0 currentcolor; 53 | } 54 | 25% { 55 | box-shadow: 0 .2em 0 0px currentcolor; 56 | } 57 | 37% { 58 | box-shadow: -.2em .2em 0 0 currentcolor; 59 | } 60 | 50% { 61 | box-shadow: -.2em 0 0 0 currentcolor; 62 | } 63 | 62% { 64 | box-shadow: -.2em -.2em 0 0 currentcolor; 65 | } 66 | 75% { 67 | box-shadow: 0px -.2em 0 0 currentcolor; 68 | } 69 | 87% { 70 | box-shadow: .2em -.2em 0 0 currentcolor; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /projects/loveLoader/loveLoader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/mesh-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mesh-Loader 9 | 10 | 11 |
Made by Shubhajeet Pradhan
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/mesh-loader/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-box-sizing: border-box; 3 | box-sizing: border-box; 4 | background-color: #ffd5d5; 5 | height: 100vh; 6 | padding: 0; 7 | margin: 0; 8 | font-family: Arial; 9 | } 10 | 11 | .mesh-loader { 12 | overflow: hidden; 13 | height: inherit; 14 | width: inherit; 15 | } 16 | .mesh-loader .circle { 17 | width: 30px; 18 | height: 30px; 19 | position: absolute; 20 | background: #509be1; 21 | border-radius: 50%; 22 | margin: -15px; 23 | -webkit-animation: mesh 3s ease-in-out infinite -1.5s; 24 | animation: mesh 3s ease-in-out infinite -1.5s; 25 | } 26 | 27 | .mesh-loader > div .circle:last-child { 28 | -webkit-animation-delay: 0s; 29 | animation-delay: 0s; 30 | } 31 | 32 | .mesh-loader > div { 33 | position: absolute; 34 | top: 50%; 35 | left: 50%; 36 | } 37 | 38 | .mesh-loader > div:last-child { 39 | -webkit-transform: rotate(90deg); 40 | -ms-transform: rotate(90deg); 41 | transform: rotate(90deg); 42 | } 43 | 44 | @-webkit-keyframes mesh { 45 | 0% { 46 | -webkit-transform-origin: 50% -100%; 47 | transform-origin: 50% -100%; 48 | -webkit-transform: rotate(0); 49 | transform: rotate(0); 50 | } 51 | 50% { 52 | -webkit-transform-origin: 50% -100%; 53 | transform-origin: 50% -100%; 54 | -webkit-transform: rotate(360deg); 55 | transform: rotate(360deg); 56 | } 57 | 50.1% { 58 | -webkit-transform-origin: 50% 200%; 59 | transform-origin: 50% 200%; 60 | -webkit-transform: rotate(0deg); 61 | transform: rotate(0deg); 62 | } 63 | 100% { 64 | -webkit-transform-origin: 50% 200%; 65 | transform-origin: 50% 200%; 66 | -webkit-transform: rotate(360deg); 67 | transform: rotate(360deg); 68 | } 69 | } 70 | 71 | @keyframes mesh { 72 | 0% { 73 | -webkit-transform-origin: 50% -100%; 74 | transform-origin: 50% -100%; 75 | -webkit-transform: rotate(0); 76 | transform: rotate(0); 77 | } 78 | 50% { 79 | -webkit-transform-origin: 50% -100%; 80 | transform-origin: 50% -100%; 81 | -webkit-transform: rotate(360deg); 82 | transform: rotate(360deg); 83 | } 84 | 50.1% { 85 | -webkit-transform-origin: 50% 200%; 86 | transform-origin: 50% 200%; 87 | -webkit-transform: rotate(0deg); 88 | transform: rotate(0deg); 89 | } 90 | 100% { 91 | -webkit-transform-origin: 50% 200%; 92 | transform-origin: 50% 200%; 93 | -webkit-transform: rotate(360deg); 94 | transform: rotate(360deg); 95 | } 96 | } -------------------------------------------------------------------------------- /projects/moon-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | display: inline-block; 6 | box-sizing: border-box; 7 | animation: animloader 1s linear infinite; 8 | } 9 | 10 | @keyframes animloader { 11 | 0% { 12 | box-shadow: -72px 0 #fff inset; 13 | } 14 | 100% { 15 | box-shadow: 48px 0 #fff inset; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/moon-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/multiColor_Curve_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/multiColor_Curve_Loader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | border-top: 16px solid blue; 3 | border-right: 16px solid green; 4 | border-bottom: 16px solid red; 5 | border-radius: 50%; 6 | width: 120px; 7 | height: 120px; 8 | animation: spin 2s linear infinite; 9 | margin-left: 40rem; 10 | margin-top: 15rem; 11 | } 12 | 13 | 14 | @keyframes spin { 15 | 0% { 16 | transform: rotate(0deg); 17 | } 18 | 100% { 19 | transform: rotate(360deg); 20 | } 21 | } -------------------------------------------------------------------------------- /projects/pac-man_loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/pac-man_loader/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgba(0, 0, 0, 0.411); 3 | } 4 | .loader { 5 | margin-left: 45%; 6 | position: relative; 7 | border: 24px solid #FFF; 8 | border-radius: 50%; 9 | box-sizing: border-box; 10 | animation: eat 1s linear infinite; 11 | } 12 | 13 | .loader::after, 14 | .loader::before { 15 | content: ''; 16 | position: absolute; 17 | left: 50px; 18 | top: 50%; 19 | transform: translateY(-50%); 20 | background: #fff; 21 | width: 15px; 22 | height: 15px; 23 | border-radius: 50%; 24 | box-sizing: border-box; 25 | opacity: 0; 26 | animation: move 2s linear infinite; 27 | } 28 | 29 | .loader::before { 30 | animation-delay: 1s; 31 | } 32 | 33 | @keyframes eat { 34 | 35 | 0%, 36 | 49% { 37 | border-right-color: #FFF 38 | } 39 | 40 | 50%, 41 | 100% { 42 | border-right-color: #0000 43 | } 44 | } 45 | 46 | @keyframes move { 47 | 0% { 48 | left: 75px; 49 | opacity: 1 50 | } 51 | 52 | 50% { 53 | left: 0px; 54 | opacity: 1 55 | } 56 | 57 | 52%, 58 | 100% { 59 | left: -5px; 60 | opacity: 0; 61 | } 62 | } -------------------------------------------------------------------------------- /projects/pencil-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | height: 200px; 4 | width: 200px; 5 | border-bottom: 3px solid #ff3d00; 6 | box-sizing: border-box; 7 | animation: drawLine 4s linear infinite; 8 | } 9 | .loader:before { 10 | content: ""; 11 | position: absolute; 12 | left: calc(100% + 14px); 13 | bottom: -6px; 14 | width: 16px; 15 | height: 100px; 16 | border-radius: 20px 20px 50px 50px; 17 | background-repeat: no-repeat; 18 | background-image: linear-gradient(#ff3d00 6px, transparent 0), 19 | linear-gradient(45deg, rgba(0, 0, 0, 0.02) 49%, white 51%), 20 | linear-gradient(315deg, rgba(0, 0, 0, 0.02) 49%, white 51%), 21 | linear-gradient( to bottom, #ffffff 10%, #ff3d00 10%, #ff3d00 90%, #ffffff 90% ); 22 | background-size: 3px 3px, 8px 8px, 8px 8px, 16px 88px; 23 | background-position: center bottom, left 88px, right 88px, left top; 24 | transform: rotate(25deg); 25 | animation: pencilRot 4s linear infinite; 26 | } 27 | 28 | @keyframes drawLine { 29 | 0%, 100% { width: 0px } 30 | 45%, 55% { width: 200px } 31 | } 32 | 33 | @keyframes pencilRot { 34 | 0%, 45% { 35 | bottom: -6px; 36 | left: calc(100% + 14px); 37 | transform: rotate(25deg); 38 | } 39 | 55%, 40 | 100% { 41 | bottom: -12px; 42 | left: calc(100% + 16px); 43 | transform: rotate(220deg); 44 | } 45 | } -------------------------------------------------------------------------------- /projects/pencil-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | pencil-loader 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/processloader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 16px; 3 | height: 16px; 4 | border-radius: 50%; 5 | background-color: #fff; 6 | box-shadow: 32px 0 #fff, -32px 0 #fff; 7 | position: relative; 8 | animation: flash 0.5s ease-out infinite alternate; 9 | } 10 | 11 | @keyframes flash { 12 | 0% { 13 | background-color: #FFF2; 14 | box-shadow: 32px 0 #FFF2, -32px 0 #FFF; 15 | } 16 | 50% { 17 | background-color: #FFF; 18 | box-shadow: 32px 0 #FFF2, -32px 0 #FFF2; 19 | } 20 | 100% { 21 | background-color: #FFF2; 22 | box-shadow: 32px 0 #FFF, -32px 0 #FFF2; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/processloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/progress-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | display: block; 3 | position: relative; 4 | height: 12px; 5 | width: 80%; 6 | border: 1px solid #fff; 7 | border-radius: 10px; 8 | overflow: hidden; 9 | } 10 | .loader:after { 11 | content: ''; 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | height: 100%; 16 | width: 0; 17 | background: #ff3d00; 18 | animation: 6s prog ease-in infinite; 19 | } 20 | 21 | @keyframes prog { 22 | to { 23 | width: 100%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/progress-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/progressloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/progressloader/style.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | display: inline-block; 6 | position: relative; 7 | border: 3px solid; 8 | border-color: #FFF #FFF transparent; 9 | box-sizing: border-box; 10 | animation: rotation 1s linear infinite; 11 | } 12 | .loader::after { 13 | content: ''; 14 | box-sizing: border-box; 15 | position: absolute; 16 | left: 0; 17 | right: 0; 18 | top: 0; 19 | bottom: 0; 20 | margin: auto; 21 | border: 3px solid; 22 | border-color: transparent #FF3D00 #FF3D00; 23 | width: 24px; 24 | height: 24px; 25 | border-radius: 50%; 26 | animation: rotationBack 0.5s linear infinite; 27 | transform-origin: center center; 28 | } 29 | 30 | @keyframes rotation { 31 | 0% { 32 | transform: rotate(0deg); 33 | } 34 | 100% { 35 | transform: rotate(360deg); 36 | } 37 | } 38 | 39 | @keyframes rotationBack { 40 | 0% { 41 | transform: rotate(0deg); 42 | } 43 | 100% { 44 | transform: rotate(-360deg); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /projects/pulsing-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pulse Loader 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/pulsing-loader/style.css: -------------------------------------------------------------------------------- 1 | .pulsing { 2 | width:65px; 3 | height:117px; 4 | position:relative; 5 | } 6 | .pulsing:before, 7 | .pulsing:after { 8 | content:""; 9 | position:absolute; 10 | inset:0; 11 | background:#ff8001; 12 | box-shadow: 0 0 0 50px; 13 | clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);; 14 | } 15 | 16 | .pulsing:after { 17 | animation:pl 1s infinite; 18 | transform:perspective(300px) translateZ(0px) 19 | } 20 | 21 | @keyframes pl { 22 | to {transform:perspective(300px) translateZ(180px);opacity:0} 23 | } -------------------------------------------------------------------------------- /projects/quarter-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | display: inline-block; 6 | position: relative; 7 | border: 10px solid; 8 | box-sizing: border-box; 9 | animation: animloader 1s linear infinite alternate; 10 | } 11 | @keyframes animloader { 12 | 0% { 13 | border-color: white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) 14 | rgba(255, 255, 255, 0); 15 | } 16 | 33% { 17 | border-color: white white rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); 18 | } 19 | 66% { 20 | border-color: white white white rgba(255, 255, 255, 0); 21 | } 22 | 100% { 23 | border-color: white white white white; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/quarter-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | loader 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/shape-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shape Loader 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/shape-loader/style.css: -------------------------------------------------------------------------------- 1 | .shapes { 2 | width: 40px; 3 | height: 40px; 4 | display: grid; 5 | animation: sh-0 1.5s infinite linear; 6 | } 7 | .shapes:before, 8 | .shapes:after { 9 | content: ""; 10 | grid-area: 1/1; 11 | background:#514b82; 12 | animation: 13 | sh-1 1.5s infinite linear, 14 | sh-2 1.5s infinite linear; 15 | } 16 | .shapes:after { 17 | --s:-1; 18 | animation-direction: reverse; 19 | } 20 | 21 | @keyframes sh-0 { 22 | 0%,9%,91%,100% {background:#514b82} 23 | 10%,90% {background:#0000} 24 | } 25 | @keyframes sh-1 { 26 | 0%,33% {clip-path: polygon(0 0,50% 100%,100% 0,100% 100%,0 100%)} 27 | 66%,100% {clip-path: polygon(50% 0,50% 100%,50% 0,100% 100%,0 100%)} 28 | } 29 | @keyframes sh-2 { 30 | 0%,10%,90%,100% {transform: scale(var(--s,1)) translateY(0)} 31 | 33%,66% {transform: scale(var(--s,1)) translateY(50%)} 32 | } 33 | -------------------------------------------------------------------------------- /projects/skeleton-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Content Placeholder 8 | 9 | 10 |
11 | 12 | 13 |
14 |

15 |   16 |

17 |

18 |   19 |   20 |   21 |   22 |

23 |
24 |
 
25 |
26 |   29 |   30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /projects/skeleton-loader/script.js: -------------------------------------------------------------------------------- 1 | const header = document.getElementById('header') 2 | const title = document.getElementById('title') 3 | const excerpt = document.getElementById('excerpt') 4 | const profile_img = document.getElementById('profile_img') 5 | const name = document.getElementById('name') 6 | const date = document.getElementById('date') 7 | 8 | const animated_bgs = document.querySelectorAll('.animated-bg') 9 | const animated_bg_texts = document.querySelectorAll('.animated-bg-text') 10 | 11 | setTimeout(getData, 2500) 12 | 13 | function getData() { 14 | header.innerHTML = 15 | '' 16 | title.innerHTML = 'Lorem ipsum dolor sit amet' 17 | excerpt.innerHTML = 18 | 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis' 19 | profile_img.innerHTML = 20 | '' 21 | name.innerHTML = 'John Doe' 22 | date.innerHTML = 'Oct 08, 2020' 23 | 24 | animated_bgs.forEach((bg) => bg.classList.remove('animated-bg')) 25 | animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text')) 26 | } -------------------------------------------------------------------------------- /projects/skeleton-loader/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #ecf0f1; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | img { 19 | max-width: 100%; 20 | } 21 | 22 | .card { 23 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 24 | border-radius: 10px; 25 | overflow: hidden; 26 | width: 350px; 27 | } 28 | 29 | .card-header { 30 | height: 200px; 31 | } 32 | 33 | .card-header img { 34 | object-fit: cover; 35 | height: 100%; 36 | width: 100%; 37 | } 38 | 39 | .card-content { 40 | background-color: #fff; 41 | padding: 30px; 42 | } 43 | 44 | .card-title { 45 | height: 20px; 46 | margin: 0; 47 | } 48 | 49 | .card-excerpt { 50 | color: #777; 51 | margin: 10px 0 20px; 52 | } 53 | 54 | .author { 55 | display: flex; 56 | } 57 | 58 | .profile-img { 59 | border-radius: 50%; 60 | overflow: hidden; 61 | height: 40px; 62 | width: 40px; 63 | } 64 | 65 | .author-info { 66 | display: flex; 67 | flex-direction: column; 68 | justify-content: space-around; 69 | margin-left: 10px; 70 | width: 100px; 71 | } 72 | 73 | .author-info small { 74 | color: #aaa; 75 | margin-top: 5px; 76 | } 77 | 78 | .animated-bg { 79 | background-image: linear-gradient( 80 | to right, 81 | #f6f7f8 0%, 82 | #edeef1 10%, 83 | #f6f7f8 20%, 84 | #f6f7f8 100% 85 | ); 86 | background-size: 200% 100%; 87 | animation: bgPos 1s linear infinite; 88 | } 89 | 90 | .animated-bg-text { 91 | border-radius: 50px; 92 | display: inline-block; 93 | margin: 0; 94 | height: 10px; 95 | width: 100%; 96 | } 97 | 98 | @keyframes bgPos { 99 | 0% { 100 | background-position: 50% 0; 101 | } 102 | 103 | 100% { 104 | background-position: -150% 0; 105 | } 106 | } -------------------------------------------------------------------------------- /projects/slider-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 100%; 3 | height: 4.8px; 4 | display: inline-block; 5 | position: relative; 6 | overflow: hidden; 7 | } 8 | .loader::after { 9 | content: ''; 10 | width: 96px; 11 | height: 4.8px; 12 | background: #fff; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | box-sizing: border-box; 17 | animation: hitZak 0.6s ease-in-out infinite alternate; 18 | } 19 | 20 | @keyframes hitZak { 21 | 0% { 22 | left: 0; 23 | transform: translateX(-1%); 24 | } 25 | 100% { 26 | left: 100%; 27 | transform: translateX(-99%); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/slider-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/spin-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border-radius: 50%; 5 | position: relative; 6 | animation: rotate 1s linear infinite 7 | } 8 | .loader::before , .loader::after { 9 | content: ""; 10 | box-sizing: border-box; 11 | position: absolute; 12 | inset: 0px; 13 | border-radius: 50%; 14 | border: 5px solid #FFF; 15 | animation: prixClipFix 2s linear infinite ; 16 | } 17 | .loader::after{ 18 | transform: rotate3d(90, 90, 0, 180deg ); 19 | border-color: #FF3D00; 20 | } 21 | 22 | @keyframes rotate { 23 | 0% {transform: rotate(0deg)} 24 | 100% {transform: rotate(360deg)} 25 | } 26 | 27 | @keyframes prixClipFix { 28 | 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} 29 | 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} 30 | 75%, 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} 31 | } -------------------------------------------------------------------------------- /projects/spin-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/spiral-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border: 5px solid #FFF; 5 | border-radius: 50%; 6 | display: inline-block; 7 | box-sizing: border-box; 8 | position: relative; 9 | animation: pulse 1s linear infinite; 10 | } 11 | .loader:after { 12 | content: ''; 13 | position: absolute; 14 | width: 48px; 15 | height: 48px; 16 | border: 5px solid #FFF; 17 | border-radius: 50%; 18 | display: inline-block; 19 | box-sizing: border-box; 20 | left: 50%; 21 | top: 50%; 22 | transform: translate(-50%, -50%); 23 | animation: scaleUp 1s linear infinite; 24 | } 25 | 26 | @keyframes scaleUp { 27 | 0% { transform: translate(-50%, -50%) scale(0) } 28 | 60% , 100% { transform: translate(-50%, -50%) scale(1)} 29 | } 30 | @keyframes pulse { 31 | 0% , 60% , 100%{ transform: scale(1) } 32 | 80% { transform: scale(1.2)} 33 | } -------------------------------------------------------------------------------- /projects/spiral-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/tennis-loader/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | min-height: 100vh; 3 | display: grid; 4 | align-content: center; 5 | justify-items: center; 6 | } 7 | .loader { 8 | position: relative; 9 | height: 40px; 10 | width: 6px; 11 | color: #000; 12 | animation: paddles 0.75s ease-out infinite; 13 | } 14 | .loader:before { 15 | content: ""; 16 | position: absolute; 17 | margin: 0 auto; 18 | left: 0; 19 | right: 0; 20 | top: 15px; 21 | width: 12px; 22 | height: 12px; 23 | background-color: #de3500; 24 | border-radius: 50%; 25 | animation: ballbounce 0.6s ease-out infinite; 26 | } 27 | 28 | @keyframes paddles { 29 | 0% { box-shadow: -25px -10px, 25px 10px} 30 | 50% { box-shadow: -25px 8px, 25px -10px } 31 | 100% { box-shadow: -25px -10px, 25px 10px} 32 | } 33 | @keyframes ballbounce { 34 | 0% { transform: translateX(-20px) scale(1, 1.2) } 35 | 25% { transform: scale(1.2, 1) } 36 | 50% { transform: translateX(15px) scale(1, 1.2) } 37 | 75% { transform: scale(1.2, 1) } 38 | 100% { transform: translateX(-20px) } 39 | } 40 | -------------------------------------------------------------------------------- /projects/tennis-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Loader 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/triangle_loaders/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 48px; 4 | height: 48px; 5 | } 6 | .loader:before, 7 | .loader:after { 8 | content:""; 9 | display: block; 10 | border: 32px solid transparent; 11 | border-top-color: #fff; 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | animation: weld-rotate 2s infinite ease-in; 16 | } 17 | .loader:before { 18 | border-color: transparent transparent transparent #FF3D00; 19 | animation-delay: 0.5s; 20 | } 21 | @keyframes weld-rotate { 22 | 0% , 25% {transform: rotate(0deg)} 23 | 50% , 75% {transform: rotate(180deg)} 24 | 100% {transform: rotate(360deg)} 25 | } 26 | -------------------------------------------------------------------------------- /projects/triangle_loaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/tubeLoader/tubeLoader.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 48px; 3 | height: 48px; 4 | border:10px solid #FFF; 5 | border-radius: 50%; 6 | position: relative; 7 | transform:rotate(45deg); 8 | box-sizing: border-box; 9 | } 10 | .loader::before { 11 | content: ""; 12 | position: absolute; 13 | box-sizing: border-box; 14 | inset:-10px; 15 | border-radius: 50%; 16 | border:10px solid #FF3D00; 17 | animation: prixClipFix 2s infinite linear; 18 | } 19 | 20 | @keyframes prixClipFix { 21 | 0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)} 22 | 25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)} 23 | 50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)} 24 | 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} 25 | 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} 26 | } 27 | -------------------------------------------------------------------------------- /projects/tubeLoader/tubeLoader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/wave-loader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | position: relative; 3 | width: 85px; 4 | height: 50px; 5 | background-repeat: no-repeat; 6 | background-image: linear-gradient(#fff 50px, transparent 0), 7 | linear-gradient(#fff 50px, transparent 0), 8 | linear-gradient(#fff 50px, transparent 0), 9 | linear-gradient(#fff 50px, transparent 0), 10 | linear-gradient(#fff 50px, transparent 0), 11 | linear-gradient(#fff 50px, transparent 0); 12 | background-position: 0px center, 15px center, 30px center, 45px center, 13 | 60px center, 75px center, 90px center; 14 | animation: rikSpikeRoll 0.65s linear infinite alternate; 15 | } 16 | @keyframes rikSpikeRoll { 17 | 0% { 18 | background-size: 10px 3px; 19 | } 20 | 16% { 21 | background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px; 22 | } 23 | 33% { 24 | background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 25 | 10px 3px; 26 | } 27 | 50% { 28 | background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 29 | 10px 3px; 30 | } 31 | 66% { 32 | background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 33 | 10px 3px; 34 | } 35 | 83% { 36 | background-size: 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px, 37 | 10px 3px; 38 | } 39 | 100% { 40 | background-size: 10px 3px, 10px 3px, 10px 3px, 10px 10px, 10px 30px, 41 | 10px 50px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /projects/wave-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/wobble-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wobble loader 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /projects/wobble-loader/style.css: -------------------------------------------------------------------------------- 1 | .wobbling{ 2 | width:20px; 3 | height:20px; 4 | border-radius:50%; 5 | background:radial-gradient(at 30% 30%,#0000,#000a) red; 6 | position: relative; 7 | left:0px; 8 | top: 0px; 9 | animation: 10 | w-1 0.6s, 11 | w-2 0.3s; 12 | animation-timing-function:cubic-bezier(.5,-200,.5,200); 13 | animation-iteration-count:infinite; 14 | } 15 | @keyframes w-1 { 16 | 100% { left:1px; } 17 | } 18 | @keyframes w-2 { 19 | 100% { top :0.3px; } 20 | } -------------------------------------------------------------------------------- /projects/zoomloader/index.css: -------------------------------------------------------------------------------- 1 | .loader { 2 | width: 8px; 3 | height: 8px; 4 | position: relative; 5 | border-radius: 50%; 6 | background: #fff; 7 | animation: wave 1s ease-in infinite; 8 | } 9 | 10 | @keyframes wave { 11 | 0% { box-shadow: 12 | 0 0 0 0px rgba(255, 255,255, 1), 13 | 0 0 0 20px rgba(255, 255,255, 0.2), 14 | 0 0 0 40px rgba(255, 255,255, 0.6), 15 | 0 0 0 60px rgba(255, 255,255, 0.4), 16 | 0 0 0 80px rgba(255, 255,255, 0.2) 17 | } 18 | 100% { box-shadow: 19 | 0 0 0 80px rgba(255, 255,255, 0), 20 | 0 0 0 60px rgba(255, 255,255, 0.2), 21 | 0 0 0 40px rgba(255, 255,255, 0.4), 22 | 0 0 0 20px rgba(255, 255,255, 0.6), 23 | 0 0 0 0px rgba(255, 255,255, 1) 24 | } 25 | } 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/zoomloader/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100'); 2 | 3 | h2 { 4 | display: block; 5 | color: white; 6 | font-weight: 100; 7 | text-align: center; 8 | } 9 | body { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | margin: 0; 16 | font-family: 'Lato'; 17 | font-weight: 300; 18 | font-size: 24px; 19 | background: #2b2b2b; 20 | } 21 | .mosaic-loader { 22 | --cell-size: 64px; 23 | --cell-spacing: 1px; 24 | --border-width: 1px; 25 | --cells: 4; 26 | --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing))); 27 | display: flex; 28 | flex-wrap: wrap; 29 | width: var(--total-size); 30 | height: var(--total-size); 31 | } 32 | .mosaic-loader > .cell { 33 | --cell-color: white; 34 | flex: 0 0 var(--cell-size); 35 | margin: var(--cell-spacing); 36 | background-color: transparent; 37 | box-sizing: border-box; 38 | border: var(--border-width) solid var(--cell-color); 39 | animation: 1.5s ripple ease infinite; 40 | } 41 | .mosaic-loader > .cell.d-1 { 42 | animation-delay: 100ms; 43 | } 44 | .mosaic-loader > .cell.d-2 { 45 | animation-delay: 200ms; 46 | } 47 | .mosaic-loader > .cell.d-3 { 48 | animation-delay: 300ms; 49 | } 50 | .mosaic-loader > .cell.d-4 { 51 | animation-delay: 400ms; 52 | } 53 | .mosaic-loader > .cell.d-5 { 54 | animation-delay: 500ms; 55 | } 56 | .mosaic-loader > .cell.d-6 { 57 | animation-delay: 600ms; 58 | } 59 | .mosaic-loader > .cell:nth-child(1) { 60 | --cell-color: #d4aee0; 61 | } 62 | .mosaic-loader > .cell:nth-child(2) { 63 | --cell-color: #8975b4; 64 | } 65 | .mosaic-loader > .cell:nth-child(3) { 66 | --cell-color: #64518a; 67 | } 68 | .mosaic-loader > .cell:nth-child(4) { 69 | --cell-color: #565190; 70 | } 71 | .mosaic-loader > .cell:nth-child(5) { 72 | --cell-color: #44abac; 73 | } 74 | .mosaic-loader > .cell:nth-child(6) { 75 | --cell-color: #2ca7d8; 76 | } 77 | .mosaic-loader > .cell:nth-child(7) { 78 | --cell-color: #1482ce; 79 | } 80 | .mosaic-loader > .cell:nth-child(8) { 81 | --cell-color: #05597c; 82 | } 83 | .mosaic-loader > .cell:nth-child(9) { 84 | --cell-color: #b2dd57; 85 | } 86 | .mosaic-loader > .cell:nth-child(10) { 87 | --cell-color: #57c443; 88 | } 89 | .mosaic-loader > .cell:nth-child(11) { 90 | --cell-color: #05b853; 91 | } 92 | .mosaic-loader > .cell:nth-child(12) { 93 | --cell-color: #19962e; 94 | } 95 | .mosaic-loader > .cell:nth-child(13) { 96 | --cell-color: #fdc82e; 97 | } 98 | .mosaic-loader > .cell:nth-child(14) { 99 | --cell-color: #fd9c2e; 100 | } 101 | .mosaic-loader > .cell:nth-child(15) { 102 | --cell-color: #d5385a; 103 | } 104 | .mosaic-loader > .cell:nth-child(16) { 105 | --cell-color: #911750; 106 | } 107 | @keyframes ripple { 108 | 0% { 109 | background-color: transparent; 110 | } 111 | 30% { 112 | background-color: var(--cell-color); 113 | } 114 | 60% { 115 | background-color: transparent; 116 | } 117 | 100% { 118 | background-color: transparent; 119 | } 120 | } 121 | --------------------------------------------------------------------------------