lit-ct-components/src/ct-loading-bar.ts at master · Conectate/lit-ct-components · GitHub

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
/**

## ct-loading-bar

The progress bars are for situations where the percentage completed can be
determined. They give users a quick sense of how much longer an operation
will take.
Example:
```html
<ct-loading-bar></ct-loading-bar>
```


The following mixins are available for styling:


Custom property | Description | Default
----------------|-------------|---------
`--ct-loading-bar-c1` | Color of the container | `#4998ff`
`--ct-loading-bar-c2` | Color of the container | `#fff`
`--ct-loading-bar-c3` | Color of the container | `#4998ff`

	@element ct-loading-bar
 */
@customElement("ct-loading-bar")
export class CtLoadingBar extends LitElement {
	render() {
		return html`
			<style>
				:host {
					display: block;
				}
				@keyframes sidebar-loading {
					from {
						left: 50%;
						width: 0;
						z-index: 100;
					}

					33.3333% {
						left: 0;
						width: 100%;
						z-index: 10;
					}

					to {
						left: 0;
						width: 100%;
					}
				}
				.horizontal-loader {
					position: relative;
					width: 100%;
					height: 4px;
					background-color: #fff;
				}
				.horizontal-loader-bar {
					height: 100%;
					content: "";
					display: inline-block;
					position: absolute;
					left: 50%;
					text-align: center;
				}

				.horizontal-loader-bar:nth-child(1) {
					-webkit-animation: sidebar-loading 3s linear infinite;
					animation: sidebar-loading 3s linear infinite;
					background: var(--ct-loading-bar-c1, #4998ff);
					border-radius: 8px;
				}

				.horizontal-loader-bar:nth-child(2) {
					background: var(--ct-loading-bar-c2, #fff);
					-webkit-animation: sidebar-loading 3s linear 1s infinite;
					animation: sidebar-loading 3s linear 1s infinite;
					border-radius: 8px;
				}

				.horizontal-loader-bar:nth-child(3) {
					background: var(--ct-loading-bar-c3, #4998ff);
					-webkit-animation: sidebar-loading 3s linear 2s infinite;
					animation: sidebar-loading 3s linear 2s infinite;
					border-radius: 8px;
				}
			</style>
			<div class="horizontal-loader">
				<div class="horizontal-loader-bar"></div>
				<div class="horizontal-loader-bar"></div>
				<div class="horizontal-loader-bar"></div>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		"ct-loading-bar": CtLoadingBar;
	}
}