javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(loading): add loading indicator component and styles

Browse Source 
this is the initial commit - still needs work

references #5426
This commit is contained in:
Brandy Carney
2016-03-28 17:35:49 -04:00
parent 9a23a925a4
commit a485cd00ed
15 changed files with 733 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
ionic/components/loading/loading.ios.scss Normal file
View File

@@ -0,0 +1,71 @@
@import "../../globals.core";
@import "./loading";
// iOS Loading Indicator
// --------------------------------------------------
$loading-ios-padding: 24px 34px !default;
$loading-ios-max-height: 90% !default;
$loading-ios-border-radius: 8px !default;
$loading-ios-text-color: #000 !default;
$loading-ios-background: #f8f8f8 !default;
$loading-ios-content-font-weight: bold !default;
$loading-ios-spinner-color: #69717d !default;
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
.loading-wrapper {
padding: $loading-ios-padding;
max-height: $loading-ios-max-height;
border-radius: $loading-ios-border-radius;
color: $loading-ios-text-color;
background: $loading-ios-background;
}
// iOS Loading Content
// -----------------------------------------
.loading-content {
font-weight: $loading-ios-content-font-weight;
}
.loading-spinner + .loading-content {
margin-left: 16px;
}
// iOS Loading Spinner fill colors
// -----------------------------------------
.loading-spinner {
.spinner-ios line,
.spinner-ios-small line {
stroke: $loading-ios-spinner-ios-color;
}
.spinner-bubbles circle {
fill: $loading-ios-spinner-bubbles-color;
}
.spinner-circles circle {
fill: $loading-ios-spinner-circles-color;
}
.spinner-crescent circle {
stroke: $loading-ios-spinner-crescent-color;
}
.spinner-dots circle {
fill: $loading-ios-spinner-dots-color;
}
}