Skip to content

Commit a485cd0

Browse files
brandyscarneybrandyscarney
committed
feat(loading): add loading indicator component and styles
this is the initial commit - still needs work references ionic-team#5426
1 parent 9a23a92 commit a485cd0

15 files changed

Lines changed: 733 additions & 0 deletions

‎ionic/components.core.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"components/grid/grid",
1818
"components/icon/icon",
1919
"components/infinite-scroll/infinite-scroll",
20+
"components/loading/loading",
2021
"components/menu/menu",
2122
"components/modal/modal",
2223
"components/refresher/refresher",

‎ionic/components.ios.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"components/item/item.ios",
1919
"components/label/label.ios",
2020
"components/list/list.ios",
21+
"components/loading/loading.ios",
2122
"components/menu/menu.ios",
2223
"components/modal/modal.ios",
2324
"components/radio/radio.ios",

‎ionic/components.md.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"components/item/item.md",
1919
"components/label/label.md",
2020
"components/list/list.md",
21+
"components/loading/loading.md",
2122
"components/menu/menu.md",
2223
"components/modal/modal.md",
2324
"components/radio/radio.md",

‎ionic/components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export * from './components/menu/menu-toggle'
1919
export * from './components/menu/menu-close'
2020
export * from './components/label/label'
2121
export * from './components/list/list'
22+
export * from './components/loading/loading'
2223
export * from './components/show-hide-when/show-hide-when'
2324
export * from './components/modal/modal'
2425
export * from './components/nav/nav'

‎ionic/components.wp.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"components/item/item.wp",
1919
"components/label/label.wp",
2020
"components/list/list.wp",
21+
"components/loading/loading.wp",
2122
"components/menu/menu.wp",
2223
"components/modal/modal.wp",
2324
"components/radio/radio.wp",

‎ionic/components/loading/loading.ios.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import "../../globals.core";
2+
@import "./loading";
3+
4+
// iOS Loading Indicator
5+
// --------------------------------------------------
6+
7+
$loading-ios-padding: 24px 34px !default;
8+
$loading-ios-max-height: 90% !default;
9+
$loading-ios-border-radius: 8px !default;
10+
$loading-ios-text-color: #000 !default;
11+
$loading-ios-background: #f8f8f8 !default;
12+
13+
$loading-ios-content-font-weight: bold !default;
14+
15+
$loading-ios-spinner-color: #69717d !default;
16+
17+
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
18+
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
19+
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
20+
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
21+
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
22+
23+
24+
.loading-wrapper {
25+
padding: $loading-ios-padding;
26+
27+
max-height: $loading-ios-max-height;
28+
29+
border-radius: $loading-ios-border-radius;
30+
color: $loading-ios-text-color;
31+
background: $loading-ios-background;
32+
}
33+
34+
35+
// iOS Loading Content
36+
// -----------------------------------------
37+
38+
.loading-content {
39+
font-weight: $loading-ios-content-font-weight;
40+
}
41+
42+
.loading-spinner + .loading-content {
43+
margin-left: 16px;
44+
}
45+
46+
47+
// iOS Loading Spinner fill colors
48+
// -----------------------------------------
49+
50+
.loading-spinner {
51+
.spinner-ios line,
52+
.spinner-ios-small line {
53+
stroke: $loading-ios-spinner-ios-color;
54+
}
55+
56+
.spinner-bubbles circle {
57+
fill: $loading-ios-spinner-bubbles-color;
58+
}
59+
60+
.spinner-circles circle {
61+
fill: $loading-ios-spinner-circles-color;
62+
}
63+
64+
.spinner-crescent circle {
65+
stroke: $loading-ios-spinner-crescent-color;
66+
}
67+
68+
.spinner-dots circle {
69+
fill: $loading-ios-spinner-dots-color;
70+
}
71+
}

‎ionic/components/loading/loading.md.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import "../../globals.core";
2+
@import "./loading";
3+
4+
// Material Design Loading Indicator
5+
// --------------------------------------------------
6+
7+
$loading-md-padding: 24px !default;
8+
$loading-md-max-height: 90% !default;
9+
$loading-md-border-radius: 2px !default;
10+
$loading-md-text-color: rgba(0, 0, 0, .5) !default;
11+
$loading-md-background: #fafafa !default;
12+
$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
13+
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
14+
15+
$loading-md-spinner-color: color($colors-md, primary) !default;
16+
17+
$loading-md-spinner-ios-color: $loading-md-spinner-color !default;
18+
$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default;
19+
$loading-md-spinner-circles-color: $loading-md-spinner-color !default;
20+
$loading-md-spinner-crescent-color: $loading-md-spinner-color !default;
21+
$loading-md-spinner-dots-color: $loading-md-spinner-color !default;
22+
23+
24+
.loading-wrapper {
25+
padding: $loading-md-padding;
26+
27+
max-height: $loading-md-max-height;
28+
29+
border-radius: $loading-md-border-radius;
30+
color: $loading-md-text-color;
31+
background: $loading-md-background;
32+
33+
box-shadow: $loading-md-box-shadow;
34+
}
35+
36+
37+
// Material Design Loading Content
38+
// -----------------------------------------
39+
40+
.loading-spinner + .loading-content {
41+
margin-left: 16px;
42+
}
43+
44+
45+
// Material Design Loading Spinner fill colors
46+
// -----------------------------------------
47+
48+
.loading-spinner {
49+
.spinner-ios line,
50+
.spinner-ios-small line {
51+
stroke: $loading-md-spinner-ios-color;
52+
}
53+
54+
.spinner-bubbles circle {
55+
fill: $loading-md-spinner-bubbles-color;
56+
}
57+
58+
.spinner-circles circle {
59+
fill: $loading-md-spinner-circles-color;
60+
}
61+
62+
.spinner-crescent circle {
63+
stroke: $loading-md-spinner-crescent-color;
64+
}
65+
66+
.spinner-dots circle {
67+
fill: $loading-md-spinner-dots-color;
68+
}
69+
}

‎ionic/components/loading/loading.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import "../../globals.core";
2+
3+
// Loading Indicator
4+
// --------------------------------------------------
5+
6+
7+
ion-loading {
8+
position: absolute;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
left: 0;
13+
z-index: $z-index-overlay;
14+
15+
display: flex;
16+
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
.loading-wrapper {
22+
z-index: $z-index-overlay-wrapper;
23+
display: flex;
24+
25+
align-items: center;
26+
27+
opacity: 0;
28+
}
29+
30+
// Loading Backdrop
31+
// -----------------------------------------
32+
33+
.hide-backdrop {
34+
display: none;
35+
}

0 commit comments

Comments
 (0)