feat: add spinners

demo/app/assets/views/documentation.xml

@@ -95,6 +95,11 @@
                   Toasts
                 </a>
               </w>
+              <w class="nav-item">
+                <a class="nav-link" href="components/spinners.xml" target="demo-content">
+                  Spinners
+                </a>
+              </w>
               <w class="nav-item">
                 <a class="nav-link" href="components/scrollbar.xml" target="demo-content">
                   Scrollbar

docs/components/spinners.md

@@ -0,0 +1,82 @@
+# Spinners
+
+Indicate the loading state of a component or page with spinners.
+
+## About
+
+“spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any C code to create them. Their appearance, alignment, and sizing can be easily customized with ourutility classes.
+
+## Border spinner
+
+Use the border spinners for a lightweight loading indicator.
+
+``` spinners-demo-xml
+<spinner />
+<spinner type="ring" />
+```
+
+## Colors
+
+The border spinner uses `currentColor` for its `color`, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
+
+``` colors-spinners-demo-xml
+
+<w class="mb-2">
+  <spinner class="text-primary" />
+  <spinner class="text-secondary" />
+  <spinner class="text-success" />
+  <spinner class="text-danger" />
+  <spinner class="text-warning" />
+  <spinner class="text-info" />
+  <spinner class="text-light" />
+  <spinner class="text-dark" />
+</w>
+<w>
+  <spinner type="ring" class="text-primary" />
+  <spinner type="ring" class="text-secondary" />
+  <spinner type="ring" class="text-success" />
+  <spinner type="ring" class="text-danger" />
+  <spinner type="ring" class="text-warning" />
+  <spinner type="ring" class="text-info" />
+  <spinner type="ring" class="text-light" />
+  <spinner type="ring" class="text-dark" />
+</w>
+```
+
+## Alignment
+
+Spinners in LC Design are built with `px`, `currentColor`, and `display: inline-block`. This means they can easily be resized, recolored, and quickly aligned.
+
+### Margin
+
+Use margin utilities like .m-5 for easy spacing.
+
+``` margin-spinners-demo-xml
+<spinner class="m-5" />
+```
+
+### Placement
+
+Use flexbox utilities, float utilities to place spinners exactly where you need them in any situation.
+
+#### Flex
+
+``` flex-spinners-demo-xml
+<w class="d-flex justify-content-center">
+  <spinner />
+</w>
+```
+
+## Size
+
+Set `size="small"` attribute to make a smaller spinner.
+
+``` size-spinners-demo-xml
+<spinner size="small" />
+```
+
+Or, use custom CSS or inline styles to change the dimensions as needed.
+
+``` style-spinners-demo-xml
+<spinner style="font-size: 36px" />
+```

include/LCDesign/ui/components.h

@@ -37,6 +37,7 @@
 #include <LCDesign/ui/components/icon.h>
 #include <LCDesign/ui/components/img.h>
 #include <LCDesign/ui/components/rate.h>
+#include <LCDesign/ui/components/spinner.h>
 #include <LCDesign/ui/components/password.h>
 #include <LCDesign/ui/components/typography.h>
 #include <LCDesign/ui/components/modal.h>

include/LCDesign/ui/components/spinner.h

@@ -0,0 +1,37 @@
+/*
+ * spinner.h -- Spinner, used to indicate the loading state of a component
+ * or page.
+ *
+ * Copyright (c) 2019, Liu chao <[email protected]> All rights reserved.
+ *
+ * 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 LCUI 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 OWNER 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.
+ */
+
+#ifndef LCUIEX_SPINNER_H_
+#define LCUIEX_SPINNER_H_
+
+LCUI_API void LCDesign_InitSpinner(void);
+
+#endif

main.vcxproj

@@ -169,6 +169,7 @@
     <ClCompile Include="src\ui\components\modal.c" />
     <ClCompile Include="src\ui\components\password.c" />
     <ClCompile Include="src\ui\components\rate.c" />
+    <ClCompile Include="src\ui\components\spinner.c" />
     <ClCompile Include="src\ui\components\typography.c" />
     <ClCompile Include="src\ui\dismiss.c" />
     <ClCompile Include="src\ui\toggle.c" />
@@ -184,6 +185,7 @@
     <ClInclude Include="include\LCDesign\ui\components\modal.h" />
     <ClInclude Include="include\LCDesign\ui\components\password.h" />
     <ClInclude Include="include\LCDesign\ui\components\rate.h" />
+    <ClInclude Include="include\LCDesign\ui\components\spinner.h" />
     <ClInclude Include="include\LCDesign\ui\components\typography.h" />
     <ClInclude Include="include\LCDesign\ui\dismiss.h" />
     <ClInclude Include="include\LCDesign\ui\toggle.h" />

main.vcxproj.filters

@@ -55,6 +55,7 @@
       <Filter>源文件</Filter>
     </ClCompile>
     <ClCompile Include="src\ui\components\rate.c">
+    <ClCompile Include="src\ui\components\spinner.c">
       <Filter>源文件</Filter>
     </ClCompile>
   </ItemGroup>
@@ -98,5 +99,8 @@
     <ClInclude Include="include\LCDesign\ui\components\rate.h">
       <Filter>头文件\LCDesign\components</Filter>
     </ClInclude>
+    <ClInclude Include="include\LCDesign\ui\components\spinner.h">
+      <Filter>头文件\LCDesign\components</Filter>
+    </ClInclude>
   </ItemGroup>
 </Project>

src/main.c

@@ -38,6 +38,7 @@ void LCDesign_Init(void)
 	LCDesign_InitIcon();
 	LCDesign_InitImg();
 	LCDesign_InitRate();
+	LCDesign_InitSpinner();
 	LCDesign_InitPassword();
 	LCDesign_InitTypograhy();
 	LCDesign_InitModal();

src/ui/components/password.c

@@ -37,14 +37,14 @@ static struct LCDesign_PasswordModule {
 	LCUI_WidgetPrototype proto;
 } self;
 
-static void Password_Init( LCUI_Widget w )
+static void Password_Init(LCUI_Widget w)
 {
-	self.proto->proto->init( w );
-	TextEdit_SetPasswordChar( w, L'●' );
+	self.proto->proto->init(w);
+	TextEdit_SetPasswordChar(w, L'●');
 }
 
-void LCDesign_InitPassword( void )
+void LCDesign_InitPassword(void)
 {
-	self.proto = LCUIWidget_NewPrototype( "password", "textedit" );
+	self.proto = LCUIWidget_NewPrototype("password", "textedit");
 	self.proto->init = Password_Init;
 }