DEV Community

Cover image for spinnercss - 32 different types of spinners
Mahdi
Mahdi

Posted on

1 1

spinnercss - 32 different types of spinners

Improve your website with ready-made spinnercss. Give your website more personality with ready-to-use spinners featuring stunning designs and layouts.

View Website

View On GitHub


Documents

Spinners are available in three different styles; circle , dots, line . You can choose each with your interest. And we will describe and use it.

First, add the spinnercss.css file to your project so you can access the classes, there is also a compressed version of this file.

How to use or library syntax is as follows:

First Sample Code

<div class="circle-2 spinner-background-full">
    <div class="circle-2"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Second Sample Code

<div class="dots-9">
    <div class="dots-9"></div>
    <div class="dots-9"></div>
    <div class="dots-9"></div>
    <div class="dots-9"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Classes

For comfortable work with Spinners, we have embedded several classes so that you can maneuver more on the details of the size of the work, these classes include:

resizing the width and height, the size of the border and the assignment of the background, as well as several effects to move the icons and... Of course you can easily customize this class and even Spinners. (Of course, some classes do not function for spinners, Do not worry that this partial problem will be solved in the future.)

.w-h-30 .w-h-40 ... .w-h-100
.border-width-1 .border-width-2 ... .border-width-10
.spinner-background .spinner-background-full .spinner-background-rounded
.rotate .rotateY-360 .rotateY-180 .rotateY-90 .rotateX-360 .rotateX-180
.rotateX-90


spinnercss Website Project: https://dribbble.com/shots/23584966-spinnercss-Website-Project

spinnercss Logo Project: https://dribbble.com/shots/23584953-spinnercss-Logo-Project

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay