1<!-- Copyright 2020 the V8 project authors. All rights reserved. 2Use of this source code is governed by a BSD-style license that can be 3found in the LICENSE file. --> 4<style> 5#fileReader { 6 width: 100%; 7 height: 100px; 8 line-height: 100px; 9 text-align: center; 10 border: solid 1px #000000; 11 border-radius: 5px; 12 cursor: pointer; 13 transition: all 0.5s ease-in-out; 14} 15 16#fileReader.done { 17 height: 20px; 18 line-height: 20px; 19} 20 21#fileReader:hover { 22 background-color: #e0edfe ; 23} 24 25.loading #fileReader { 26 cursor: wait; 27} 28 29#fileReader > input { 30 display: none; 31} 32 33 34#loader { 35 display: none; 36} 37 38.loading #loader { 39 display: block; 40 position: fixed; 41 top: 0px; 42 left: 0px; 43 width: 100%; 44 height: 100%; 45 background-color: rgba(255, 255, 255, 0.5); 46} 47 48#spinner { 49 position: absolute; 50 width: 100px; 51 height: 100px; 52 top: 40%; 53 left: 50%; 54 margin-left: -50px; 55 border: 30px solid #000; 56 border-top: 30px solid #36E; 57 border-radius: 50%; 58 animation: spin 1s ease-in-out infinite; 59} 60 61@keyframes spin { 62 0% { 63 transform: rotate(0deg); 64 } 65 100% { 66 transform: rotate(360deg); 67 } 68} 69</style> 70 71<section id="fileReaderSection"> 72 <div id="fileReader" tabindex=1 > 73 <span id="label"> 74 Drag and drop a trace file into this area, or click to choose from disk. 75 </span> 76 <input id="file" type="file" name="file" /> 77 </div> 78 <div id="loader"> 79 <div id="spinner"></div> 80 </div> 81</section> 82