diff --git a/Spinners.md b/Spinners.md new file mode 100644 index 0000000..0b1c66b --- /dev/null +++ b/Spinners.md @@ -0,0 +1,54 @@ +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](https://github.com/Chalarangelo/mini.css/blob/master/scss/mini-extra/_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. \ No newline at end of file