Some of Our Sources
- Slashdot
- Engadget
- Mashable
- Team Treehouse
- Spoon Graphics
- Creative Curio
- Web Designer Depot
- Web Design Ledger
- Spyre Studios
- Willems Lab
Help Webnuz
Referal links:
January 27, 2022 01:43 pm GMT
Original Link: https://dev.to/robsonmuniz16/css-loading-animation-html-css-1lcb
CSS Loading Animation | HTML & CSS
Make a CSS Loading Animation using HTML & CSS, step-by-step from SCRATCH
Web Dev
https://bit.ly/3oBQbc0
Source Code:
Markup
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Loading Animation</title> <link rel="stylesheet" href="style.css"></head><body> <div class="loader"> <span></span> <span></span> <span></span> <h2>Loading...</h2> </div></body></html>CSS
* { margin: 0; padding: 0; box-sizing: border-box;}body { background-color: #111; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden;}.loader { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center;}.loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff; pointer-events: none; animation: animate 5s linear infinite;}.loader span:nth-child(1) { border-color: #e64032; border-radius: 48% 52% 55% 45% / 45% 34% 66% 55%;}.loader span:nth-child(2) { border-color: #f6b801; border-radius: 74% 26% 68% 32% / 21% 55% 45% 79%; animation-direction: reverse;}.loader span:nth-child(3) { border-color: #31a452; border-radius: 43% 57% 57% 43% / 49% 70% 30% 51%; animation-duration: 2.5s;}@keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.loader h2 { color: #b1ddf1; font-family: consolas, sans-serif; font-weight: 500;}Original Link: https://dev.to/robsonmuniz16/css-loading-animation-html-css-1lcb
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To