From b999571a90933ec0bee7e34d7a6a0715901d212e Mon Sep 17 00:00:00 2001 From: Tobias Ahlin Date: Mon, 28 Oct 2019 11:01:04 +0100 Subject: [PATCH] Add center utility class, and explain how to use it --- README.md | 1 + spinkit.css | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/README.md b/README.md index 69f651f..bb7b4cb 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ Simple loading spinners animated with CSS. See [demo](http://tobiasahlin.com/spi - Add `spinkit.css` or `spinkit.min.css` to your project (or copy-paste the CSS that you need for your spinner—there are no dependencies between spinners, no shared classes, and no shared animations, etc, so it should be fairly straight-forward to extract only the code that you need) - Add a spinner to your project by copy-pasting HTML from `spinkit.css` or `examples.html` +- Add the `sk-center` utility class to the spinner to center it (it sets `margin` to `auto`) - By default, the `width` and `height` of all spinners are set to `40px`. `background-color` is set to `#333`. - Configure the spinner by overwriting the CSS variables, primarily `--sk-size` (spinner width & height) and `--sk-color` (spinner color). If you need broader browser support, remove the CSS variables. diff --git a/spinkit.css b/spinkit.css index 90cd999..de35f4c 100644 --- a/spinkit.css +++ b/spinkit.css @@ -5,6 +5,10 @@ } +/* Utility class for centering */ +.sk-center { margin: auto; } + + /* Plane