aniftyco / Tailwindcss Spinner
Licence: mit
Spinner utility for Tailwind CSS
Stars: ✭ 163
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Spinner
Vue Full Loading
Full overlay loading with spinner for Vue
Stars: ✭ 148 (-9.2%)
Mutual labels: spinner
Tailwindcss Dir
Adds direction (LTR, RTL) variants to your Tailwind project
Stars: ✭ 156 (-4.29%)
Mutual labels: tailwindcss
Pingcrm React
⚛️ Ping CRM React - A demo app to illustrate how Inertia.js works with Laravel and React (hosted on a heroku free dyno).
Stars: ✭ 158 (-3.07%)
Mutual labels: tailwindcss
Tailwindcss Filters
Tailwind CSS plugin to generate filter and backdrop filter utilities
Stars: ✭ 150 (-7.98%)
Mutual labels: tailwindcss
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-6.75%)
Mutual labels: tailwindcss
Devfolio
A modern and production-ready personal portfolio + blog template built with GatsbyJs and TailwindCSS
Stars: ✭ 154 (-5.52%)
Mutual labels: tailwindcss
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+6974.23%)
Mutual labels: tailwindcss
Vue Cli Plugin Tailwind
vue-cli plugin for Tailwind CSS
Stars: ✭ 154 (-5.52%)
Mutual labels: tailwindcss
Multiselectspinner
Android - Select Multiple Items from Spinner with Filtration.
Stars: ✭ 158 (-3.07%)
Mutual labels: spinner
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1310.43%)
Mutual labels: tailwindcss
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (-4.91%)
Mutual labels: tailwindcss
React Native Input Spinner
An extensible input number spinner component for react-native highly customizable. This component enhance a text input for entering numeric values, with increase and decrease buttons.
Stars: ✭ 155 (-4.91%)
Mutual labels: spinner
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+1046.63%)
Mutual labels: spinner
Tailwind Cards
A growing collection of text/image cards you can use/copy-paste in your tailwind css projects
Stars: ✭ 154 (-5.52%)
Mutual labels: tailwindcss
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-10.43%)
Mutual labels: tailwindcss
Apesuperhud
A simple way to display a HUD with a message or progress information in your application.
Stars: ✭ 156 (-4.29%)
Mutual labels: spinner
Tailwindcss Figma Plugin
Figma Plugin for TailwindCSS
Stars: ✭ 165 (+1.23%)
Mutual labels: tailwindcss
Admin Template
Tailwind CSS Starter Template - Admin Dashboard Template
Stars: ✭ 160 (-1.84%)
Mutual labels: tailwindcss
React Spinners Kit
A collection of loading spinners with React.js
Stars: ✭ 158 (-3.07%)
Mutual labels: spinner
Tailwind CSS Spinner
Spinner utility for Tailwind CSS
NOTICE: This package is now deprecated and archived as Tailwind CSS v1.6 introduced animations with spinners in the examples. Please use that instead.
Installation
Add this plugin to your project:
# Install using pnpm
pnpm install --save-dev tailwindcss-spinner
# Install using npm
npm install --save-dev tailwindcss-spinner
# Install using yarn
yarn add -D tailwindcss-spinner
Usage
// tailwind.config.js
{
theme: { // defaults to these values
spinner: (theme) => ({
default: {
color: '#dae1e7', // color you want to make the spinner
size: '1em', // size of the spinner (used for both width and height)
border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
speed: '500ms', // the speed at which the spinner should rotate
},
// md: {
// color: theme('colors.red.500', 'red'),
// size: '2em',
// border: '2px',
// speed: '500ms',
// },
}),
},
variants: { // all the following default to ['responsive']
spinner: ['responsive'],
},
plugins: [
// optional configuration for resulting class name and/or tailwind theme key
require('tailwindcss-spinner')({ className: 'spinner', themeKey: 'spinner' }),
],
}
Resulting CSS:
.spinner {
position: relative;
color: transparent !important;
pointer-events: none;
}
.spinner::after {
content: '';
position: absolute !important;
top: calc(50% - (1em / 2));
left: calc(50% - (1em / 2));
display: block;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-radius: 9999px;
border-right-color: transparent;
border-top-color: transparent;
animation: spinAround 500ms infinite linear;
}
@keyframes spinAround {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Example
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].