tobiasahlin / spinkit Goto Github PK

I tried to increase the width and height but that's not help me to increase the spinner.

Currently, size is hardcoded:

width: 40px;
height: 40px;

After #36 lands, lets move all .html files to a demo folder, to get them out of the way. The primary way to preview the spinners should live at http://tobiasahlin.com/spinkit/, so we can optimize this project for using in your projects.

The current main is the gulpfile. However, there are dependencies specified as devDependencies, which breaks Browserify's bundle function because it can't find modules that are required.

I believe the solution should be to remove gulpfile.js as the main file in package.json, because users aren't going to use the gulpfile from this project outside of developing.

There are problems with the name of those animations when we are using other libraries.
I was involved in this with https://github.com/daneden/animate.css where "bounce" name is used too.

I guess the best solution here will be using custom animation names, such as "spinkit-bounce"

Hi,
I just stumbled upon a conflict using Animate CSS “plugin" (https://daneden.github.io/animate.css/), looks like they have keyframes called as well "bounce".
Maybe it would be better if spinKit keyframes have a specfic prefix like "spinKitBounce", it would avoid such conflicts as "bounce" is pretty common for CSS animation name...
Thank you anyway for this great work 👍

http://tobiasahlin.com/spinkit/;

this site is very beautiful ,do you tell me the use the frame's name?

Website doesn't work!

Site temporarily disabled

This page has been temporarily disabled due to a misconfigured custom domain.

Are you the site owner? Follow the instructions for setting up a custom domain with GitHub pages to update your site's DNS records to point to the proper IP address.

You can find more information in our GitHub Pages legacy IP deprecation blog post. If you have any questions, please contact support.

I have been wrestling with this for a while. Using a CSS diff tool and I can't find the difference between the sample code (using scss) and my project. Can anyone point me as to what might cause the sk-wave to squish like this?

I am using this in a ReactJS application. Interestingly, as soon as I put it in the react application jsx, I get this issue. Works fine when I have it in the app's container html. See below (html above, jsx below)

I'm not quite sure how the CSS files have -webkit-animation prefixes, but looking at the code the SCSS variant doesn't.

I'm importing SpinKit into my SASS project via @import 'spinkit'; however nothing is animating in webkit because of the missing prefix 😢

This spinner kit is awesome! I pull a request about a week ago, but not pass.

Is this project alive?

How can i pull less version of SpinKit to your repository?

https://github.com/amazingSurge/SpinKit.less

I clean some markup for the spinner. Using autoprefixer for browser compatibility. And it also has standalone version for each spinners (e.g. https://github.com/amazingSurge/SpinKit.less/blob/master/css/standalone/double-bounce.css).

If you try to open files in console, e.g. 1 - Rotating Plane.html, you'll get an error, because of raw spaces aren't ok in shell, just escaped spaces are allowed. Also, - is used ase replacement for spaces ( ).

Please rename files to something like 1-rotating-plane.html (without spaces and lowercased.

Thanks.

iOS issue with animation-delay. see @ http://i.xomf.com/nhqkq.gif

subj

Why are the spinners on the demo site vastly different than the examples. In particular the circle spinner on the demo has fewer dots in the spinner and the source is very different than the code in the examples/8-circle.html. And the css for the circle spinner on the demo page is not spinkit.css file. Can the example files be updated to include the exact spinners on the demo page?

Thanks.

Isn't it better if there is a Contribution part in README.md, which redirects users to CONTRIBUTING.md?

Use native objc code.

This is totally up for grabs for anyone who wants to help ⚡

https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinners/4-wandering-cubes.scss#L22-L23

Would be nice to be able to npm install -D spinkit like with Bower. I could publish it myself, but perhaps it would look better if we had an official npm account for SpinKit?

Hello,

Good job here, thanks for all animations.

Like explain in the title this animation doesn't work for me on IE11 and Safari.

For IE11 :
The keyframes isn't the same from the -webkit- one.
Opacity must be set to 1
@Keyframes fadedelay {
0%, 39%, 100% { opacity: 0 }
40% { opacity: 1 } // 0 currently
}
For Safari I have no idea.

if you shrink the circle-spinner to 15px by 15px and the dots to anything less than 6px you start to see visual artifiacts. any ideas on why? i'm trying to fit it into a small button

I placed the source for the spinner circle animation into JsFiddle and I just modified the height and width. I tried 30px, 20px, and 16px, and I see a flashing artifact during the animation.

https://jsfiddle.net/udeleng/pqxv7xj9/

Browser: Chrome 60.0.3112.90 (Official Build) (64-bit)
OS: Windows 10 Pro

http://codepen.io/anon/pen/epaNzg

Put your spinner into table and see this artefacts.

I love your style so I'm thinking of a little commission.

The three bounce is perfect for route transitions, but there are moments in certain views where a component is only fully constructed on demand. Suppose it takes a few seconds, up to six in my case, to build the component; I would like to overlay a spinner that conveys the work of "unboxing" (which the user prefers over "construction" in data entry apps).

The animation would begin with a plain square that unfolds from the centre into a diamond, which then unfolds from the centre into a square. If possible the shape would continuously shrink, and the shape would always be the same size, but if that's too difficult then the larger diamond could scale down before unfolding, and the larger square could scale down before the animation repeated. A simpler version of all this is to simply rotate the diamond back to the square and repeat, but I think the full version is more compelling.

This (or something like it) would make a nice addition to the SpinKit collection :D

It looks like the spinner 4-wandering-cubes is not following the designed pattern on Android Browser with Android 4.1 (maybe some others too) : instead of having the 2 cubes at opposite angles of a square share, they look like being at 2 consecutive angles. Do you have any idea on what might be going on ?

Is this possible? I've been mucking around with jQuery and CSS for the last hour or two trying to figure this out, probably something really simple, lol.

failed to resolve compile 'com.github.ybq:Android-SpinKit:1.0.4'

With Android fixes, and new default margins.

• Update Readme
• Release!

Hi! Nice work here! 👍 + 💖

When trying the Circle Spinner in Safari 5.1.7 or Chrome 24 on Win, I cannot see any animation 😢
On Firefox 29 it works well.

Any thoughts ❓

Fritz

It looks like the spinner 7-three-bounce is inverted on Android Browser with Android 4.1 (maybe some others too) : instead of bouncing circles 1 2 3, it bounces circles 3 2 1. Do you have any idea on what might be going on ?

Hi, I'm displaying all the spinners in one page, and I noticed that the fading circle appears with an extra margin of 40px. I could fix this easily by adding this rule in my css:

    .sk-fading-circle .sk-circle{
        margin: 0;
    }

I belileve this should be part of the distributed spinkit.css.
What happens is that fading circle and circle spinners both use the ".sk-circle" class, and so
if you use a fading spinner using the current spinkit.css (with all spinners merged), you will have an extra (and undesirable) 40px margin.

Hope this helps. Cheers.

Hi Tobias.. great tool!!
Is there a chance you can add a code for a simple SVG animation to show how more complex graphics can be treated?

Thanks.

I'm looking to integrate this library into angular-base-apps to provide a set of angular directives for loading symbols. I want to allow the user to easily change the size and color of the loading symbols as desired.

I noticed PR #113 attempts to add the ability to configure the size of the loading symbol, however, it still hardcodes the values and produces a ton more CSS that most people will need.

I was wondering whether there were any plans to add SCSS mixins for the spinners? This would make it possible for the spinner to work with any size configuration as you will simply need to define the math using the argument instead of hard coding the values.

Let's make it easier to drop a sk-spinner into your project. You shouldn't have to implement this yourself.

here's a example that I made:

http://dabblet.com/gist/8373488

It's common scenario when default site font is overridden to use custom font, i.e. loaded from Google Fonts. In such cases spinner layout may be broken for a fraction of a second while fonts are loading.

The simple fix is to add font-family: sans-serif; to spinner container class.

BTW: Awesome spinners!

The MIT license requires including the copyright notice and license with the software, yet I don't see that included in the actual files. Do you expect others to add it when they use your software? (or maybe you might want to add it, so it is always included :)

Thanks.

Hey,

Nice collection of loaders! Just a suggestion if you add:

animation-fill-mode:both;

To your circles it will stop them jumping from there default value to scale(0) and starting the animation.

Thanks,

Fitz

hi,
i don't now finish loading page. help me.
please show code demo loadpage about 1s or 2s.
Thank you!

If the html gets minified, the wave space is missing.

works

<div class="sk-wave">
    <div class="sk-rect sk-rect1"></div>
    <div class="sk-rect sk-rect2"></div>
    <div class="sk-rect sk-rect3"></div>
    <div class="sk-rect sk-rect4"></div>
    <div class="sk-rect sk-rect5"></div>
  </div>

does not work

<div class="sk-wave"><div class="sk-rect sk-rect1"></div><div class="sk-rect sk-rect2"></div><div class="sk-rect sk-rect3"></div><div class="sk-rect sk-rect4"></div><div class="sk-rect sk-rect5"></div></div>

Is it possible to add a text message below the spinner?
Naive approach didn't work.

Just go the next slide (circle) and go back to previous one (square).

You'll see that the square is not animating anymore. But if you inspect the item you'll see that the div is "rotating" but not repainting.

A bug?

Tested on Chrome 38.0.2125.122 (Build 290379) m 64bit

Hi there,

thanks for this nice collection, thinking about integrating it for our Paymill site.

Best!

Great job ! Can you please elaborate :

Note that a hidden spinner (opacity: 0, or visibility: hidden) will still animate. After hiding a spinner, it's recommended to remove it from the DOM, set display: none or pause the animation by setting animation-play-state: paused.

After adding the js and including html and css how to proceed ?