Funny custom spinner

Development

AI-generated summary

A community moderator created a custom spinner for their community, Tappara.co, in celebration of Halloween. The spinner features a pumpkin image and can be easily implemented by copying the provided CSS code into the Customization/CSS area and replacing the image URL with a desired image. ljpp shared the code and demonstrated its use with a pumpkin image.

ljpp later changed the discussion title to “Funny custom spinner” to reflect the spinner’s potential for various themes and uses. With Movember approaching, the spinner’s versatility is highlighted.

Other users contributed to the discussion, with neil mentioning a hammer spinner used by Roofing, and dax suggesting the use of tools like cssanimate.com to easily add effects to custom spinners, even for those with no CSS knowledge.

1

It’s almost Halloween, so one of our moderators made this little easter egg (or halloween pumpkin) for our community. Just find a fitting image file and copy this to your Customization/CSS area.

Ours is live for a few days at Tappara.co

.spinner {
  -webkit-animation: pulse 700ms infinite linear;
  -moz-animation: pulse 700ms infinite linear;
  -ms-animation: pulse 700ms infinite linear;
  animation: pulse 700ms infinite linear;
  width: 120px;
  height: 120px;
  background-image: url("https://your-pumpkin-goes-here.png");
  border: none;
  margin: 50px auto;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    -webkit-transform: scale3d(1.0, 1.0, 1.0);
  }
  to {
    -webkit-transform: scale3d(0.6, 0.6, 0.6);
  }
}

@-moz-keyframes pulse {
  from {
    -moz-transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    -moz-transform: scale3d(1.0, 1.0, 1.0);
  }
  to {
    -moz-transform: scale3d(0.6, 0.6, 0.6);
  }
}

@-o-keyframes pulse {
  from {
    -o-transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    -o-transform: scale3d(1.0, 1.0, 1.0);
  }
  to {
    -o-transform: scale3d(0.6, 0.6, 0.6);
  }
}

@-ms-keyframes pulse {
  from {
    -ms-transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    -ms-transform: scale3d(1.0, 1.0, 1.0);
  }
  to {
    -ms-transform: scale3d(0.6, 0.6, 0.6);
  }
}

@keyframes pulse {
  from {
    transform: scale3d(0.6, 0.6, 0.6);
  }
  50% {
    transform: scale3d(1.0, 1.0, 1.0);
  }
  to {
    transform: scale3d(0.6, 0.6, 0.6);
  }
}
2

My original topic title was short sighted. You can of course utilize this for an unlimited number of reasons or themes, thus I changed the title to be more descriptive.

Now we are just about to go Movember.

3

I’m a big fan of Roofing’s hammer spinner.

4

Using tools like http://cssanimate.com/ it’s very simple add some effects even if you have no knowledge of CSS.
You need only to remember to change the Class Name before copy and paste the code in you CSS tab (in this case the Class Name is spinner)

Oh… and add those lines when you use a custom URL img

.spinner{
    width: 128px; /*change this*/
    height: 128px; /*and this in relation to the image size*/
    background-image: url("your-url-image.png");
    border: none;
}