Skip to content

Commit 6b6b544

Browse files
fifoosidfifoosid
authored
feat(ui5-busyindicator): initial implementation (#416)
1 parent c177f10 commit 6b6b544

17 files changed

+333
-1
lines changed

‎packages/main/bundle.esm.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
1010
import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
1111
import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
1212

13+
import BusyIndicator from "./dist/BusyIndicator.js";
1314
import Button from "./dist/Button.js";
1415
import CheckBox from "./dist/CheckBox.js";
1516
import Card from "./dist/Card.js";

‎packages/main/src/BusyIndicator.hbs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="{{classes.main}}">
2+
<div class="ui5-busyindicator-circle circle-animation-0"></div>
3+
<div class="ui5-busyindicator-circle circle-animation-1"></div>
4+
<div class="ui5-busyindicator-circle circle-animation-2"></div>
5+
</div>

‎packages/main/src/BusyIndicator.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
2+
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
3+
import BusyIndicatorRenderer from "./build/compiled/BusyIndicatorRenderer.lit.js";
4+
5+
// Styles
6+
import busyIndicatorCss from "./themes/BusyIndicator.css.js";
7+
8+
// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
9+
import "./ThemePropertiesProvider.js";
10+
import BusyIndicatorType from "./types/BusyIndicatorType.js";
11+
12+
/**
13+
* @public
14+
*/
15+
const metadata = {
16+
tag: "ui5-busyindicator",
17+
properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
18+
/**
19+
* Defines the size of the <code>ui5-busyindicator</code>.
20+
* </br></br>
21+
* <b>Note:</b> Available options are "Small", "Medium", "Large"
22+
*
23+
* @type {BusyIndicatorType}
24+
* @defaultvalue "Large"
25+
* @public
26+
*/
27+
size: { type: BusyIndicatorType, defaultValue: BusyIndicatorType.Large },
28+
},
29+
};
30+
31+
/**
32+
* @class
33+
*
34+
* <h3 class="comment-api-title">Overview</h3>
35+
*
36+
* The <code>ui5-busyindicator</code> signals that some operation is going on and that the
37+
* user must wait. It does not block the current UI screen so other operations could be
38+
* triggered in parallel.
39+
*
40+
* <h3>Usage</h3>
41+
* For the <code>ui5-busyindicator</code> you can define the size of the indicator as well
42+
* as whether it is shown or hidden. In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code>
43+
*
44+
* <h3>ES6 Module Import</h3>
45+
*
46+
* <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
47+
*
48+
* @constructor
49+
* @author SAP SE
50+
* @alias sap.ui.webcomponents.main.BusyIndicator
51+
* @extends UI5Element
52+
* @tagname ui5-busyindicator
53+
* @public
54+
*/
55+
class BusyIndicator extends UI5Element {
56+
static get metadata() {
57+
return metadata;
58+
}
59+
60+
static get styles() {
61+
return busyIndicatorCss;
62+
}
63+
64+
static get renderer() {
65+
return BusyIndicatorRenderer;
66+
}
67+
68+
get classes() {
69+
return {
70+
main: {
71+
"ui5-busyindicator-wrapper": true,
72+
[`ui5-busyindicator-${this.size.toLowerCase()}`]: true,
73+
},
74+
};
75+
}
76+
}
77+
78+
Bootstrap.boot().then(_ => {
79+
BusyIndicator.define();
80+
});
81+
82+
export default BusyIndicator;

‎packages/main/src/themes/BusyIndicator.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:host(ui5-busyindicator) span[data-sap-ui-wc-root] {
2+
display: inline-block;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
ui5-busyindicator span[data-sap-ui-wc-root] {
8+
display: inline-block;
9+
width: 100%;
10+
height: 100%;
11+
}
12+
13+
.ui5-busyindicator-wrapper {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.ui5-busyindicator-circle {
20+
display: flex;
21+
background-color: var(--ui5-busyindicator-color);
22+
border-radius: 50%;
23+
}
24+
25+
/* Belize specific */
26+
.ui5-busyindicator-circle::before {
27+
content: "";
28+
width: 100%;
29+
height: 100%;
30+
border-radius: 100%;
31+
}
32+
33+
.ui5-busyindicator-small {
34+
width: 3rem;
35+
height: 1rem;
36+
}
37+
38+
.ui5-busyindicator-medium {
39+
width: 5rem;
40+
height: 2rem;
41+
}
42+
43+
.ui5-busyindicator-large {
44+
width: 8rem;
45+
height: 3rem;
46+
}
47+
48+
.ui5-busyindicator-small > .ui5-busyindicator-circle {
49+
width: 0.125rem;
50+
height: 0.125rem;
51+
margin: 0 0.2rem;
52+
}
53+
54+
.ui5-busyindicator-medium > .ui5-busyindicator-circle {
55+
width: 0.5rem;
56+
height: 0.5rem;
57+
margin: 0 0.4rem;
58+
}
59+
60+
.ui5-busyindicator-large > .ui5-busyindicator-circle {
61+
width: 1rem;
62+
height: 1rem;
63+
margin: 0 .75rem;
64+
}
65+
66+
.circle-animation-0 {
67+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
68+
}
69+
70+
.circle-animation-1 {
71+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
72+
animation-delay: 200ms;
73+
}
74+
75+
.circle-animation-2 {
76+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
77+
animation-delay: 400ms;
78+
}
79+
80+
@keyframes grow {
81+
0%, 50%, 100% {
82+
-webkit-transform: scale(1.0);
83+
-moz-transform: scale(1.0);
84+
-ms-transform: scale(1.0);
85+
transform: scale(1.0);
86+
}
87+
88+
25% {
89+
-webkit-transform: scale(2.5);
90+
-moz-transform: scale(2.5);
91+
-ms-transform: scale(2.5);
92+
transform: scale(2.5);
93+
}
94+
}

‎packages/main/src/themes/base/BusyIndicator-parameters.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--ui5-busyindicator-color: var(--sapUiContentIconColor);
3+
}

‎packages/main/src/themes/sap_belize/BusyIndicator-parameters.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/BusyIndicator-parameters.css";
2+
3+
:root {
4+
--ui5-busyindicator-color: var(--sapUiAccent6);
5+
}

‎packages/main/src/themes/sap_belize/parameters-bundle.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./global-parameters.css";
33

44
@import "./Button-parameters.css";
5+
@import "./BusyIndicator-parameters.css";
56
@import "./Popover-parameters.css";
67
@import "./DatePicker-parameters.css";
78
@import "./DayPicker-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/BusyIndicator-parameters.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/BusyIndicator-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./global-parameters.css";
33

44
@import "./Button-parameters.css";
5+
@import "./BusyIndicator-parameters.css";
56
@import "./CalendarHeader-parameters.css";
67
@import "./Card-parameters.css";
78
@import "./CheckBox-parameters.css";

‎packages/main/src/themes/sap_fiori_3/BusyIndicator-parameters.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/BusyIndicator-parameters.css";

0 commit comments

Comments
 (0)