[feature] Added spinner

The spinner behaviour is not perfect yet: it can
be interrupted with two faded blue dots when transitionning
to finished state.

examples/touch/content/SpinnerPage.qml

+/****************************************************************************************
+**
+** Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+** All rights reserved.
+**
+** You may use this file under the terms of BSD license as follows:
+**
+** Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are met:
+**     * Redistributions of source code must retain the above copyright
+**       notice, this list of conditions and the following disclaimer.
+**     * Redistributions in binary form must reproduce the above copyright
+**       notice, this list of conditions and the following disclaimer in the
+**       documentation and/or other materials provided with the distribution.
+**     * Neither the name of the author nor the
+**       names of its contributors may be used to endorse or promote products
+**       derived from this software without specific prior written permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+** ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+** DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR
+** ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+**
+****************************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0 //needed for the Stack attached property
+import QtQuick.Controls.Nemo 1.0
+import QtQuick.Controls.Styles.Nemo 1.0
+
+Page {
+    id: root
+
+    tools: ToolBarLayoutExample { title: "Spinner" }
+
+    Column {
+        spacing: 40
+        anchors.centerIn: parent
+
+        Button {
+            text: "Toggle spinner"
+            onClicked: spinner.enabled = !spinner.enabled
+        }
+
+        Spinner {
+            id: spinner
+        }
+    }
+
+}

examples/touch/main.qml

@@ -87,6 +87,10 @@ ApplicationWindow {
             title: "TextInput"
             page: "content/TextInputPage.qml"
         }
+        ListElement {
+            title: "Spinner"
+            page: "content/SpinnerPage.qml"
+        }
     }
 
 

examples/touch/resources.qrc

@@ -17,5 +17,6 @@
         <file>images/toolbar.png</file>
         <file>content/LiveCoding.qml</file>
         <file>content/ToolBarLayoutExample.qml</file>
+        <file>content/SpinnerPage.qml</file>
     </qresource>
 </RCC>

examples/touch/touch.pro

@@ -18,7 +18,8 @@ OTHER_FILES += \
     content/TabBarPage.qml \
     content/TextInputPage.qml \
     content/LiveCoding.qml \
-    content/ToolBarLayoutExample.qml
+    content/ToolBarLayoutExample.qml \
+    content/SpinnerPage.qml
 
 RESOURCES += \
     resources.qrc

src/controls/Spinner.qml

+/****************************************************************************************
+**
+** Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+** All rights reserved.
+**
+** You may use this file under the terms of BSD license as follows:
+**
+** Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are met:
+**     * Redistributions of source code must retain the above copyright
+**       notice, this list of conditions and the following disclaimer.
+**     * Redistributions in binary form must reproduce the above copyright
+**       notice, this list of conditions and the following disclaimer in the
+**       documentation and/or other materials provided with the distribution.
+**     * Neither the name of the author nor the
+**       names of its contributors may be used to endorse or promote products
+**       derived from this software without specific prior written permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+** ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+** WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+** DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDERS OR CONTRIBUTORS BE LIABLE FOR
+** ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+** (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+** LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+** ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+**
+****************************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Controls.Styles.Nemo 1.0
+
+Item {
+    id: container
+//    anchors.centerIn: parent
+    width: 2 * Theme.spinner.radius + Theme.spinner.horizontalSpacing
+    height: 2 * Theme.spinner.radius + Theme.spinner.verticalSpacing
+//    visible: enabled
+
+    states: [
+        State { name: "enabled"; when: enabled }
+    ]
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "enabled"
+
+            SequentialAnimation {
+                NumberAnimation {
+                    targets: [circle0, circle1, circle2, circle3]
+                    property: "opacity"
+                    to: 1
+                    duration: Theme.spinner.initialStateDuration
+                }
+                PropertyAction { target: animations; property: "running"; value: true }
+            }
+        },
+        Transition {
+            from: "enabled"
+            to: ""
+
+            SequentialAnimation {
+                PropertyAction { target: animations; property: "running"; value: false }
+                PropertyAnimation {
+                    targets: [circle0, circle1, circle2, circle3]
+                    property: "color";
+                    to: Theme.spinner.primaryColor
+                    duration: Theme.spinner.transitionDuration
+                }
+                NumberAnimation {
+                    targets: [circle0, circle1, circle2, circle3]
+                    property: "opacity"
+                    to: 0
+                    duration: Theme.spinner.initialStateDuration
+                }
+            }
+        }
+    ]
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: animation.start()
+    }
+
+    Item {
+        id: innerRect
+        anchors.centerIn: parent
+        width: Theme.spinner.radius + Theme.spinner.horizontalSpacing
+        height: Theme.spinner.radius + Theme.spinner.verticalSpacing
+    }
+
+    Rectangle {
+        id: circle0
+        opacity: 0
+        anchors.horizontalCenter: innerRect.left
+        anchors.verticalCenter: innerRect.top
+        width: Theme.spinner.radius
+        height: Theme.spinner.radius
+        radius: Theme.spinner.radius / 2
+        color: Theme.spinner.primaryColor
+    }
+
+    Rectangle {
+        id: circle1
+        opacity: 0
+        anchors.horizontalCenter: innerRect.right
+        anchors.verticalCenter: innerRect.top
+        width: Theme.spinner.radius
+        height: Theme.spinner.radius
+        radius: Theme.spinner.radius / 2
+        color: Theme.spinner.primaryColor
+    }
+
+    Rectangle {
+        id: circle2
+        opacity: 0
+        anchors.horizontalCenter: innerRect.right
+        anchors.verticalCenter: innerRect.bottom
+        width: Theme.spinner.radius
+        height: Theme.spinner.radius
+        radius: Theme.spinner.radius / 2
+        color: Theme.spinner.primaryColor
+    }
+
+    Rectangle {
+        id: circle3
+        opacity: 0
+        anchors.horizontalCenter: innerRect.left
+        anchors.verticalCenter: innerRect.bottom
+        width: Theme.spinner.radius
+        height: Theme.spinner.radius
+        radius: Theme.spinner.radius / 2
+        color: Theme.spinner.primaryColor
+    }
+
+    SequentialAnimation {
+        id: animations
+        loops: Animation.Infinite
+        ParallelAnimation {
+            onRunningChanged: console.debug(running)
+            PropertyAnimation {
+                target: circle0
+                property: "color"
+                to: Theme.spinner.secondaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+            PropertyAnimation {
+                target: circle3
+                property: "color"
+                to: Theme.spinner.primaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+        }
+
+        ParallelAnimation {
+            PropertyAnimation {
+                target: circle1
+                property: "color"
+                to: Theme.spinner.secondaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+            PropertyAnimation {
+                target: circle0
+                property: "color"
+                to: Theme.spinner.primaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+        }
+
+        ParallelAnimation {
+            PropertyAnimation {
+                target: circle2
+                property: "color"
+                to: Theme.spinner.secondaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+            PropertyAnimation {
+                target: circle1
+                property: "color"
+                to: Theme.spinner.primaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+        }
+
+        ParallelAnimation {
+            PropertyAnimation {
+                target: circle3
+                property: "color"
+                to: Theme.spinner.secondaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+            PropertyAnimation {
+                target: circle2
+                property: "color"
+                to: Theme.spinner.primaryColor
+                duration: Theme.spinner.transitionDuration
+            }
+        }
+    }
+}

src/controls/controls.pro

@@ -9,7 +9,8 @@ THEME_IMPORT_PATH = QtQuick/Controls/Styles/Nemo/themes
 QML_FILES += \
     Button.qml \
     ApplicationWindow.qml \
-    Page.qml
+    Page.qml \
+    Spinner.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES

src/controls/qmldir

@@ -11,6 +11,7 @@ plugin nemocontrolsplugin
 Button 1.0 Button.qml
 ApplicationWindow 1.0 ApplicationWindow.qml
 Page 1.0 Page.qml
+Spinner 1.0 Spinner.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.

src/styles/autogenerated/nemotheme.cpp

@@ -45,6 +45,7 @@ NemoTheme::NemoTheme(QObject *parent)
     , m_toolBar(new NemoThemeToolBar(this))
     , m_window(new NemoThemeWindow(this))
     , m_page(new NemoThemePage(this))
+    , m_spinner(new NemoThemeSpinner(this))
 {
     loadFromFile(GLACIER_THEME);
     int id = QFontDatabase::addApplicationFont("/usr/share/fonts/google-opensans/OpenSans-Regular.ttf");
@@ -117,6 +118,11 @@ NemoThemePage * NemoTheme::page() const
     return m_page;
 }
 
+NemoThemeSpinner * NemoTheme::spinner() const
+{
+    return m_spinner;
+}
+
 QString NemoTheme::fontFamily() const
 {
     return m_fontFamily;
@@ -343,4 +349,23 @@ void NemoTheme::loadFromFile(const QString &fileName)
     if (stylesPageDimmer.contains("endPosition")) {
         m_page->dimmer()->setEndPosition(jsonToDouble(stylesPage.value("dimmer"), defines));
     }
+    // Setting properties for spinner
+    QJsonObject stylesSpinner = styles.value("spinner").toObject();
+    if (stylesSpinner.contains("radius")) {
+        m_spinner->setRadius(jsonToInt(styles.value("spinner"), defines));
+    }
+    m_spinner->setPrimaryColor(jsonToColor(jsonValue(stylesSpinner, "primaryColor", "spinner"), defines));
+    m_spinner->setSecondaryColor(jsonToColor(jsonValue(stylesSpinner, "secondaryColor", "spinner"), defines));
+    if (stylesSpinner.contains("horizontalSpacing")) {
+        m_spinner->setHorizontalSpacing(jsonToInt(styles.value("spinner"), defines));
+    }
+    if (stylesSpinner.contains("verticalSpacing")) {
+        m_spinner->setVerticalSpacing(jsonToInt(styles.value("spinner"), defines));
+    }
+    if (stylesSpinner.contains("initialStateDuration")) {
+        m_spinner->setInitialStateDuration(jsonToInt(styles.value("spinner"), defines));
+    }
+    if (stylesSpinner.contains("transitionDuration")) {
+        m_spinner->setTransitionDuration(jsonToInt(styles.value("spinner"), defines));
+    }
 }

src/styles/autogenerated/nemotheme.h

@@ -31,6 +31,7 @@
 #include "nemothemetoolbar.h"
 #include "nemothemewindow.h"
 #include "nemothemepage.h"
+#include "nemothemespinner.h"
 
 class NemoTheme: public QObject
 {
@@ -44,6 +45,7 @@ class NemoTheme: public QObject
     Q_PROPERTY(NemoThemeToolBar * toolBar READ toolBar CONSTANT)
     Q_PROPERTY(NemoThemeWindow * window READ window CONSTANT)
     Q_PROPERTY(NemoThemePage * page READ page CONSTANT)
+    Q_PROPERTY(NemoThemeSpinner * spinner READ spinner CONSTANT)
     Q_PROPERTY(QString fontFamily READ fontFamily CONSTANT)
 public:
     explicit NemoTheme(QObject *parent = 0);
@@ -58,6 +60,7 @@ public:
     NemoThemeToolBar * toolBar() const;
     NemoThemeWindow * window() const;
     NemoThemePage * page() const;
+    NemoThemeSpinner * spinner() const;
     QString fontFamily() const;
 public Q_SLOTS:
     void loadFromFile(const QString &fileName);
@@ -74,6 +77,7 @@ private:
     NemoThemeToolBar * m_toolBar;
     NemoThemeWindow * m_window;
     NemoThemePage * m_page;
+    NemoThemeSpinner * m_spinner;
     QString m_fontFamily;
 };
 

src/styles/autogenerated/nemothemespinner.cpp

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#include "nemothemespinner.h"
+
+NemoThemeSpinner::NemoThemeSpinner(QObject *parent)
+    : QObject(parent)
+    , m_radius(32)
+    , m_horizontalSpacing(15)
+    , m_verticalSpacing(15)
+    , m_initialStateDuration(1500)
+    , m_transitionDuration(500)
+{
+}
+
+int NemoThemeSpinner::radius() const
+{
+    return m_radius;
+}
+
+void NemoThemeSpinner::setRadius(int radius)
+{
+    if (m_radius != radius) {
+        m_radius = radius;
+        emit radiusChanged();
+    }
+}
+
+QColor NemoThemeSpinner::primaryColor() const
+{
+    return m_primaryColor;
+}
+
+void NemoThemeSpinner::setPrimaryColor(const QColor &primaryColor)
+{
+    if (m_primaryColor != primaryColor) {
+        m_primaryColor = primaryColor;
+        emit primaryColorChanged();
+    }
+}
+
+QColor NemoThemeSpinner::secondaryColor() const
+{
+    return m_secondaryColor;
+}
+
+void NemoThemeSpinner::setSecondaryColor(const QColor &secondaryColor)
+{
+    if (m_secondaryColor != secondaryColor) {
+        m_secondaryColor = secondaryColor;
+        emit secondaryColorChanged();
+    }
+}
+
+int NemoThemeSpinner::horizontalSpacing() const
+{
+    return m_horizontalSpacing;
+}
+
+void NemoThemeSpinner::setHorizontalSpacing(int horizontalSpacing)
+{
+    if (m_horizontalSpacing != horizontalSpacing) {
+        m_horizontalSpacing = horizontalSpacing;
+        emit horizontalSpacingChanged();
+    }
+}
+
+int NemoThemeSpinner::verticalSpacing() const
+{
+    return m_verticalSpacing;
+}
+
+void NemoThemeSpinner::setVerticalSpacing(int verticalSpacing)
+{
+    if (m_verticalSpacing != verticalSpacing) {
+        m_verticalSpacing = verticalSpacing;
+        emit verticalSpacingChanged();
+    }
+}
+
+int NemoThemeSpinner::initialStateDuration() const
+{
+    return m_initialStateDuration;
+}
+
+void NemoThemeSpinner::setInitialStateDuration(int initialStateDuration)
+{
+    if (m_initialStateDuration != initialStateDuration) {
+        m_initialStateDuration = initialStateDuration;
+        emit initialStateDurationChanged();
+    }
+}
+
+int NemoThemeSpinner::transitionDuration() const
+{
+    return m_transitionDuration;
+}
+
+void NemoThemeSpinner::setTransitionDuration(int transitionDuration)
+{
+    if (m_transitionDuration != transitionDuration) {
+        m_transitionDuration = transitionDuration;
+        emit transitionDurationChanged();
+    }
+}

src/styles/autogenerated/nemothemespinner.h

+/*
+ * Copyright (C) 2013 Lucien Xu <sfietkonstantin@free.fr>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Library General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Library General Public License for more details.
+ *
+ * You should have received a copy of the GNU Library General Public License
+ * along with this library; see the file COPYING.LIB.  If not, write to
+ * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA 02110-1301, USA.
+ */
+
+// This class is autogenerated using themehelper.py
+// Any modification done in this file will be overridden
+
+#ifndef NEMOTHEMESPINNER_H
+#define NEMOTHEMESPINNER_H
+
+#include <QtCore/QObject>
+#include <QtGui/QColor>
+
+class NemoThemeSpinner: public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(int radius READ radius NOTIFY radiusChanged)
+    Q_PROPERTY(QColor primaryColor READ primaryColor NOTIFY primaryColorChanged)
+    Q_PROPERTY(QColor secondaryColor READ secondaryColor NOTIFY secondaryColorChanged)
+    Q_PROPERTY(int horizontalSpacing READ horizontalSpacing NOTIFY horizontalSpacingChanged)
+    Q_PROPERTY(int verticalSpacing READ verticalSpacing NOTIFY verticalSpacingChanged)
+    Q_PROPERTY(int initialStateDuration READ initialStateDuration NOTIFY initialStateDurationChanged)
+    Q_PROPERTY(int transitionDuration READ transitionDuration NOTIFY transitionDurationChanged)
+public:
+    explicit NemoThemeSpinner(QObject *parent = 0);
+    int radius() const;
+    void setRadius(int radius);
+    QColor primaryColor() const;
+    void setPrimaryColor(const QColor &primaryColor);
+    QColor secondaryColor() const;
+    void setSecondaryColor(const QColor &secondaryColor);
+    int horizontalSpacing() const;
+    void setHorizontalSpacing(int horizontalSpacing);
+    int verticalSpacing() const;
+    void setVerticalSpacing(int verticalSpacing);
+    int initialStateDuration() const;
+    void setInitialStateDuration(int initialStateDuration);
+    int transitionDuration() const;
+    void setTransitionDuration(int transitionDuration);
+Q_SIGNALS:
+    void radiusChanged();
+    void primaryColorChanged();
+    void secondaryColorChanged();
+    void horizontalSpacingChanged();
+    void verticalSpacingChanged();
+    void initialStateDurationChanged();
+    void transitionDurationChanged();
+private:
+    int m_radius;
+    QColor m_primaryColor;
+    QColor m_secondaryColor;
+    int m_horizontalSpacing;
+    int m_verticalSpacing;
+    int m_initialStateDuration;
+    int m_transitionDuration;
+};
+
+#endif //NEMOTHEMESPINNER_H

src/styles/qquicknemostyleextensionplugin.cpp

@@ -49,6 +49,8 @@ void QQuickNemoStyleExtensionPlugin::registerTypes(const char *uri)
     qmlRegisterUncreatableType<NemoThemeWindow>(uri, 1, 0, "NemoThemeWindow", reason);
     qmlRegisterUncreatableType<NemoThemePage>(uri, 1, 0, "NemoThemePage", reason);
     qmlRegisterUncreatableType<NemoThemePageDimmer>(uri, 1, 0, "NemoThemePageDimmer", reason);
+    qmlRegisterUncreatableType<NemoThemeSpinner>(uri, 1, 0, "NemoThemeSpinner", reason);
+
 
     qmlRegisterSingletonType<QObject>(uri, 1, 0, "Theme", nemo_theme_provider);
 }

src/styles/styles.pro

@@ -88,7 +88,8 @@ HEADERS += \
     autogenerated/nemothemetoolbar.h \
     autogenerated/nemothemewindow.h \
     autogenerated/nemothemepage.h \
-    autogenerated/nemothemepagedimmer.h
+    autogenerated/nemothemepagedimmer.h \
+    autogenerated/nemothemespinner.h
 
 SOURCES += \
     qquicknemostyleextensionplugin.cpp \
@@ -102,7 +103,8 @@ SOURCES += \
     autogenerated/nemothemetoolbar.cpp \
     autogenerated/nemothemewindow.cpp \
     autogenerated/nemothemepage.cpp \
-    autogenerated/nemothemepagedimmer.cpp
+    autogenerated/nemothemepagedimmer.cpp \
+    autogenerated/nemothemespinner.cpp
 
 INSTALLS += target images qmlfiles themes
 

src/styles/themes/glacier.json

@@ -50,6 +50,10 @@
                 "startColor": "black",
                 "endColor": "transparent"
             }
+        },
+        "spinner": {
+            "primaryColor": "#ffffff",
+            "secondaryColor": "#0091e5"
         }
     }
 }

tools/themehelper/components.json

@@ -75,12 +75,6 @@
                 }
             ]
         },
-        
-        
-        
-        
-        
-        
         {
             "name": "ButtonPressedGradient",
             "properties": [
@@ -169,6 +163,44 @@
                     "default": 1.0
                 }
             ]
+        },
+        {
+            "name": "Spinner",
+            "properties": [
+                {
+                    "name": "radius",
+                    "type": "int",
+                    "default": 32
+                },
+                {
+                    "name": "primaryColor",
+                    "type": "QColor"
+                }, 
+                {
+                    "name": "secondaryColor",
+                    "type": "QColor"
+                }, 
+                {
+                    "name": "horizontalSpacing",
+                    "type": "int",
+                    "default": 15
+                },
+                {
+                    "name": "verticalSpacing",
+                    "type": "int",
+                    "default": 15
+                },
+                {
+                    "name": "initialStateDuration",
+                    "type": "int",
+                    "default": 1500
+                },
+                {
+                    "name": "transitionDuration",
+                    "type": "int",
+                    "default": 500
+                }
+            ]
         }
     ],
     "properties": [
@@ -199,6 +231,10 @@
         {
             "name": "page",
             "object": "Page"
+        },
+        {
+            "name": "spinner",
+            "object": "Spinner"
         }
     ],
     "font": "/usr/share/fonts/google-opensans/OpenSans-Regular.ttf"