7e50219d24
* theme-builder wip * Theme Builder updates - new CSS variable support - realtime color updating with alpha support (rgb generation) - auto tint/shade/contrast generation - auto step generation - CSS variable highlighting (forward and backwards) - Colourlovers Palette search (via local proxy) * Theme Builder Updates - Settings for auto generation - updated to 10 steps per background/ext - general cleanup - added instructions - re-worked shade/tint to mix black and white instead of lighten/darken - scoped cssText into component - apply theme to theme builder also to style internal buttons SCSS Updates - added 10 steps to reach platform - updated SCSS to use same mix and color methods as theme builder * material design color step fix * readme files fixes #13985 fixes #13986
ion-spinner
The ion-spinner component provides a variety of animated SVG spinners.
Spinners enables you to give users feedback that the app is actively
processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate.
By default, the ion-refresher feature uses this spinner component while it's
the refresher is in the refreshing state.
Ionic offers a handful of spinners out of the box, and by default, it will use the appropriate spinner for the platform on which it’s running.
lines
|
|
|---|---|
lines-small
|
|
bubbles
|
|
circles
|
|
crescent
|
|
dots
|
The following code would use the default spinner for the platform it's
running from. If it's neither iOS or Android, it'll default to use ios.
<ion-spinner></ion-spinner>
By setting the name property, you can specify which predefined spinner to
use, no matter what the platform is.
<ion-spinner name="bubbles"></ion-spinner>
Styling SVG with CSS
One cool thing about SVG is its ability to be styled with CSS! One thing to note
is that some of the CSS properties on an SVG element have different names. For
example, SVG uses the term stroke instead of border, and fill instead
of background-color.
ion-spinner{
width: 28px;
height: 28px;
stroke: #444;
fill: #222;
}
Properties
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "danger", "light", and "dark".
For more information, see Theming your App.
duration
number
How long it takes it to do one loop.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
SVG spinner name.
paused
boolean
If true, pause the animation.
Attributes
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "danger", "light", and "dark".
For more information, see Theming your App.
duration
number
How long it takes it to do one loop.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
SVG spinner name.
paused
boolean
If true, pause the animation.
Built with StencilJS