Tạo thanh loading
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Loading Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { height: 500px; } @keyframes progress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } div.loading { position: relative; width: 100%; height: 100%; background-color: white; display: flex; align-items: center; justify-content: center; z-index: 23; } div.bar { position: relative; height: 50px; width: 500px; border: 2px solid green; background-color: transparent; } div.bar::before { content: ''; position: absolute; width: 100%; height: 100%; transform-origin: left; background-color: black; animation: progress 5s infinite; } div.bar::after { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; content: 'Please Wait ...'; text-align: center; mix-blend-mode: difference; color: white; text-transform: uppercase; font-weight: 800; } </style> <script src="main.js"></script> </head> <body> <div class="loading"> <div class="bar"></div> </div> </body> </html>
PHÓNG TO