File size: 1,999 Bytes
d576558 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
class UploadProgress extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.upload-container {
background: white;
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.upload-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.upload-title {
font-weight: 500;
color: #333;
}
.upload-status {
font-size: 0.8rem;
color: #666;
}
.progress-bar {
height: 6px;
background: #eee;
border-radius: 3px;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(to right, #6366f1, #a855f7);
width: 0%;
transition: width 0.3s ease;
}
.file-info {
display: flex;
align-items: center;
margin-top: 0.5rem;
}
.file-icon {
margin-right: 0.5rem;
color: #6366f1;
}
.file-name {
font-size: 0.9rem;
color: #444;
}
.file-size {
font-size: 0.8rem;
color: #666;
margin-left: auto;
}
</style>
<div class="upload-container">
<div class="upload-header">
<div class="upload-title">Uploading Files</div>
<div class="upload-status">0%</div>
</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="file-info">
<i data-feather="file" class="file-icon" width="16"></i>
<div class="file-name">Example.pdf</div>
<div class="file-size">2.4MB</div>
</div>
</div>
`;
feather.replace();
}
}
customElements.define('upload-progress', UploadProgress); |