Tạo thanh loading xoay
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Spiner</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body > div { height: 500px; width: 100%; background-color: #002266; text-align: center; } .spiner { margin-top: 50px; width: 100px; height: 100px; display: inline-block; border: 10px solid white; border-radius: 50%; border-top: 10px solid #ff8000; animation: spiner 1.5s linear infinite; } .bar { margin-top: 50px; display: inline-block; width: 100%; } .bar > span { width: 50px; height: 50px; border-radius: 50%; background-color: #ff8000; display: inline-block; animation: dot 1.5s ease-in-out infinite both; } .bar span.dot1 { animation-delay: -0.3s; } .bar span.dot2 { animation-delay: -0.15s; } .bar span.dot3 { animation-delay: 0s; } @keyframes spiner { to { transform: rotate(360deg); } } @keyframes dot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } </style> </head> <body> <div> <div class="spiner"></div> <div class="bar"> <span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span> </div> </div> </body> </html>
PHÓNG TO