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

Load previous messages

March 22, 2019 at 12:39am

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