mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-17 04:48:13 +01:00
Code Issues Releases Wiki Activity
Page: Spinners
Pages
Base Buttons Carousel Collapse Documentation Extra utilities and experimental classes Flavors Forms Grid Home Labels and Badges Modals Navigation Navigation: Dropdown Progress Bars Spinners Tables Tabs Utilities and helper classes
Clone
1
Spinners
Angelos Chalaris edited this page 2016-10-04 13:44:35 +03:00
Table of Contents

Spinner components are simple visual components for indicating loading states. They come in two styles (dots & round) and they can be created by using the two mixins provided in the _spinner.scss partial file.

Making a dotted spinner component

To make a dotted spinner component, use the make-spinner-dots mixin.

Definition

make-spinner-dots(
	$spinner-dots-name, 
	$spinner-dots-height, 
	$spinner-dots-animation-time)

Parameters

  • $spinner-dots-name : The class name of the dotted spinner component.
  • $spinner-dots-height : The height of the dotted spinner component. [1][2]
  • $spinner-dots-animation-time : The animation time of the dotted spinner component.

Notes:

  • [1] : The value of $spinner-dots-height can be specified in em, px etc. but it is suggested that you specify it in the same measurement as the text base.
  • [2] : The value of $spinner-dots-height will be used for both the size of the component and the animation. Some tweaking might be required.

Making a round spinner component

To make a round spinner component, use the make-spinner-round mixin.

Definition

make-spinner-round(
	$spinner-round-name, 
	$spinner-round-size, 
	$spinner-round-doughnut-style, 
	$spinner-round-spin-style, 
	$spinner-round-animation-time)

Parameters

  • $spinner-round-name : The class name of the round spinner component.
  • $spinner-round-size : The size of the round spinner component. [1]
  • $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
  • $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
  • $spinner-round-animation-time : The animation time of the round spinner component.

Notes:

  • [1] : The value of $spinner-round-size affects both height and width of the component.
  • [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles specified in border style format.

Remarks

  • Spinner components use animations that might conflict with user-specific animations because of naming. These animations are named spin-dots and spin-round accordingly.
  • Some styling has been predefined such as the dotted spinner's text and the starting point of the round spinner to be on the left. These choices can be changed manually.

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.