mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-18 03:31:16 +02:00
Code Issues Releases Wiki Activity

Complete spinner module

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-09 17:15:43 +02:00
parent f14be08c71
commit 7e9afb6bba
6 changed files with 132 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/v2/DEVLOG.md
View File

@@ -333,3 +333,7 @@
- Added a small section about `tab`s and `carousel`s, just to allow me to test presentation a bit more.
- Deployed demo page with `accordion` demo.
- Added `mini-shell/tab` and `mini-shell/spinner` for the `tab` and `spinner` modules accordingly.
- Created `spinner-dot` class and custom-tailored the `spinner` for that. *NOTE* This spinner does not work perfectly fine with many elements, some tweaking might be required.
- Created `spinner-donut` class and made styling for that `spinner`.
- Added mixin `make-spinner-donut-alt-color` to allow for custom `spinner` styles. No optimizations are applied to this mixin, due to the fact that overwriting the background might cause trouble with the foreground etc.
- Optimized and softcoded most of the `spinner` module's stuff.

8
docs/v2/index.html
View File

@@ -485,6 +485,14 @@
<div><h4>Demo</h4> <p>This is the second piece of the accordion. Notice how these samples use <code>&lt;div&gt;</code> to display more complex content.</p></div>
<h3>Tabs &amp; Carousels</h3>
<p>Tabbed navigation is a very common element for many websites and single page apps. <strong>mini.css</strong> supports both of these elements using one generic component. More coming soon...</p>
<h2>Spinners<small>Loading with style</small></h2>
<p>Finally, <strong>mini.css</strong> provides you with a couple of spinner variations, <code>.spinner-dot</code> and <code>.spinner-donut</code>. Simply apply these to a <code>&lt;div&gt;</code> and you are ready to go. Both are showcased below:</p>
<p>This is some text with a <code>.spinner-dot</code> spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this <span class="spinner-dot"></span></p>
<p>And this here is a <code>.spinner-donut</code> spinner. It is more versatile and it can also use a couple of variants like <code>.secondary</code> and <code>.tertiary</code>, as shown below:</p>
<div class="spinner-donut"></div>
<div class="spinner-donut secondary"></div>
<div class="spinner-donut tertiary"></div>
</div>
</div>
</div>