Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Frontend Hub

Talk anything related Frontend development, HTML/CSS, client side Javascript, Bootstrap, etc

Frontend Hub / General

SpinThatShit - set of SCSS loaders and spinners

SpinThatShit - set of SCSS loaders and spinners

Frontend Hub/General · March 21, 2019 at 10:31pm

SpinThatShit - set of SCSS loaders and spinners

Frontend Hub / General · March 21, 2019 at 10:31pm
SpinThatShit - loaders and spinners.gif

I just found this great Open Source library of great animated loaders and spinners.

Website and Examples

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);

Check the project on Github: https://github.com/MatejKustec/SpinThatShit


March 21, 2019 at 11:55pm

cool stuff loved that

    Edited
    like-fill
    1
    • reply
    • like

    cool stuff loved that

      Indeed, glad you like it Perva

        like-fill
        1
        • reply
        • like

        March 22, 2019 at 1:14pm

        Yea Bro, cool stuff...I can use some of these spinners for my project... :D You spin me right round, baby right round :D

          like-fill
          1
          • reply
          • like

          Yea Bro, cool stuff...I can use some of these spinners for my project... :D You spin me right round, baby right round :D

            Heheh, u funny guy 😁. Glad you like it and find it useful. If you use it in some projects (even if it's for playground) feel free to share it ☺️

              like-fill
              1
              • reply
              • like

              February 22, 2020 at 1:36pm

              Noiceeeeee....

                • reply
                • like