index.html (1139B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Magic Matrix</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <style> 8 html { 9 height: 100%; 10 margin: 0; 11 } 12 13 #root, body { 14 height: 100%; 15 margin: 0; 16 } 17 18 .lds-dual-ring { 19 display: inline-block; 20 width: 80px; 21 height: 80px; 22 } 23 24 .lds-dual-ring:after { 25 content: " "; 26 display: block; 27 width: 64px; 28 height: 64px; 29 margin: 8px; 30 border-radius: 50%; 31 border: 6px solid #000; 32 border-color: #000 transparent #000 transparent; 33 animation: lds-dual-ring 1.2s linear infinite; 34 } 35 36 @keyframes lds-dual-ring { 37 0% { 38 transform: rotate(0deg); 39 } 40 100% { 41 transform: rotate(360deg); 42 } 43 } 44 45 </style> 46 </head> 47 <body> 48 <div id="root"></div> 49 <script src="MagicMatrix.js"></script> 50 </body> 51 </html>