https://github.com/mhadi-1382/spinnercss

Improve your website with ready-made spinnercss.
https://github.com/mhadi-1382/spinnercss

css html html-css-javascript html5 js loader loader-website loading mahdi-1382 mahdi-rabiee spinner spinnercss ui ux website

Last synced: 5 days ago
JSON representation

Improve your website with ready-made spinnercss.

• Host: GitHub
• URL: https://github.com/mhadi-1382/spinnercss
• Owner: Mhadi-1382
• License: mit
• Created: 2024-02-05T19:17:20.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-06T15:42:19.000Z (about 1 year ago)
• Last Synced: 2024-02-06T20:47:00.286Z (about 1 year ago)
• Topics: css, html, html-css-javascript, html5, js, loader, loader-website, loading, mahdi-1382, mahdi-rabiee, spinner, spinnercss, ui, ux, website
• Language: SCSS
• Homepage: https://mhadi-1382.github.io/spinnercss/
• Size: 7.04 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# spinnercss

![GitHub Repo Size](https://img.shields.io/github/repo-size/Mhadi-1382/spinnercss)

![GitHub Stars](https://img.shields.io/github/stars/Mhadi-1382/spinnercss)

![GitHub Forks](https://img.shields.io/github/forks/Mhadi-1382/spinnercss)






**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 Dev.to




## 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*

```



    




```

*Second Sample Code*


```



    


    


    


    




```


### 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`




## Website UI & Logo



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




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