MyGit

MatejKustec/SpinThatShit

Fork: 131 Star: 1482 (更新于 2024-10-30 10:10:39)

license: MIT

Language: SCSS .

A set of SCSS mixins for single element loaders and spinners

官方网址 GitHub网址

⚠️ THIS REPO IS DEPRECATED ⚠️

SpinThatShit

A set of SCSS mixins for single element loaders and spinners

View examples

Getting started

npm install spinthatshit
bower install SpinThatShit

OR

  • Clone or download repo
  • Include src folder to your project

Usage

Create a div with your custom loader class name:

<div class="your-loader"></div>

In your custom class name include a mixin of a loader. All loaders are ordered by number, so you will have to take a look in examples folder for your loader number.

.your-loader {
    @include loader01;
}

In _variables.scss there are default settings for loaders

$loader-color: #0052ec;
$loader-size: 56px;
$loader-height: 20px;
$loader-border-size: 8px;
$loader-gap: 12px;
$loader-animation-duration: 1s;

But you can also change these default settings, while your're including loader

@include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);

All loaders can be also aligned to center, while including loader with parameter $align, $align: center is just for x axis, $align: middle is for both axis.

PARAMETERS

Parameter Type Default value
$size Number $loader-size
$height Number $loader-height
$border-size Number $loader-border-size
$color Color $loader-color
$duration Time $loader-animation-duration
$gap Number $loader-gap
$align Keyword null

NOTE: Some loaders may not need $height and $gap parameters.

Performance issues

Some loaders which are using box-shadow for animation may be causing high cpu usage and lag, I'll need to look into more details and fix it, if it's possible.

Contributing

If you have some new idea for loader/spinner or you want to fix loader just let me know.

最近版本更新:(数据更新于 1970-01-01 00:00:00)

MatejKustec/SpinThatShit同语言 SCSS最近更新仓库

2023-03-22 19:42:52 Sansui233/logseq-bonofix-theme

2023-01-10 15:41:26 creativetimofficial/vue-light-bootstrap-dashboard

2021-01-03 03:40:41 mxdi9i7/vant-react

2016-05-11 16:23:31 Gaohaoyang/gaohaoyang.github.io

1970-01-01 00:00:00 microsoft/TypeScript-Node-Starter

1970-01-01 00:00:00 Cyber-Security-Hub/cyber-security-hub.github.io