# Funny custom spinner

**URL:** https://meta.discourse.org/t/funny-custom-spinner/52119
**Category:** Development
**Created:** [October 27, 2016, 8:29pm UTC](https://meta.discourse.org/t/funny-custom-spinner/52119 "2016-10-27T20:29:59Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [October 27, 2016, 8:29pm UTC](https://meta.discourse.org/t/funny-custom-spinner/52119/1 "2016-10-27T20:29:59Z")

</div>

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](https://tappara.co)

```plaintext
.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);
  }
}
```

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [October 31, 2016, 8:56pm UTC](https://meta.discourse.org/t/funny-custom-spinner/52119/2 "2016-10-31T20:56:15Z")

</div>

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](https://uk.movember.com/).

---

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [October 31, 2016, 9:25pm UTC](https://meta.discourse.org/t/funny-custom-spinner/52119/3 "2016-10-31T21:25:51Z")

</div>

I’m a big fan of [Roofing](http://talk.roofing.com/)’s hammer spinner.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 1, 2016, 12:21pm UTC](https://meta.discourse.org/t/funny-custom-spinner/52119/4 "2016-11-01T12:21:03Z")

</div>

Using tools like [http://cssanimate.com/](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

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