An Interest In:
Web News this Week
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
- April 12, 2024
Some of Our Sources
- BoingBoing
- TutsPlus - Code
- Just Creative
- Smashing Magazine
- Smashing Apps
- Creative Curio
- Wal You
- Codrops
- Dev To
- Hashedout
Help Webnuz
Referal links:
October 7, 2022 01:53 pm GMT
Original Link: https://dev.to/robsonmuniz16/animated-loading-spinner-html-css-20jg
Animated Loading Spinner | HTML & CSS
Learn how to build an Animated Loading Spinner Tutorial using HTML and CSS !
Source Code:
Content and Structure:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Animated Loading Spinner</title> <link rel="stylesheet" href="style.css"></head><body><div class="spinner"> Loading... <div class="spinner-sector spinner-sector-red"></div> <div class="spinner-sector spinner-sector-blue"></div> <div class="spinner-sector spinner-sector-green"></div> <div class="spinner-sector spinner-sector-orange"></div></div> </body></html>Layout and Design
*{ box-sizing: border-box; margin: 0; padding: 0;}body{ display: grid; place-items: center; min-height: 100vh; overflow: hidden;}.spinner{ width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; font-size: 2rem; overflow: hidden; position: relative; animation: text-fading 2s ease-in-out infinite alternate;}@keyframes text-fading { 0%{ color: rgba(0,0,0,1); } 50%{ color: rgba(0,0,0,0.5); } 100%{ color: rgba(0,0,0,0.1); }}.spinner-sector{ position: absolute; width: 100%; height: 100%; /*background: red;*/ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 15px solid transparent; mix-blend-mode: overlay; animation: rotate var(--duration) var(--timing) infinite;}@keyframes rotate { 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); }}.spinner-sector-red{ border-top-color: #cf2c20; --duration: 1.5s; --timing: ease-in-out;}.spinner-sector-blue{ border-left-color: #2454df; --duration: 2s; --timing: ease-in;}.spinner-sector-green{ border-right-color: #258342; --duration: 2.5s; --timing: ease-out;}.spinner-sector-orange{ border-bottom-color: #f0a204; --duration: 3s; --timing: ease-in-out;}Follow us for more content like this:
https://bit.ly/WDevMadeEasy
Original Link: https://dev.to/robsonmuniz16/animated-loading-spinner-html-css-20jg
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