Space Cat Online

Tags: css, indicator, cat, kitty, space, fun, animation

Description:

Allows you to use a custom icon (with blinking) for online status on profile. Should work with any icons, but feel free to ping me if there are bugs.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by dodgycoffee (https://layouts.spacehey.com/layout?id=36936) -->

<!-- Code by @dodgycoffee, https://spacehey.com/dodgycoffee -->

<!-- To change image, replace "background: url("yourImageUrlHere") center center no-repeat;". Default is spacecat. -->

<style>
.general-about .online {
  display: flex;
  align-items: center;
}

.general-about .online::before {
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIiBmaWxsPSIjMEM4QzAwIj48cGF0aCBkPSJNNTc2IDE2MGMwIDcwLjctNTcuMyAxMjgtMTI4IDEyOHMtMTI4LTU3LjMtMTI4LTEyOGMwLTMyLjUgMTIuMS02Mi4xIDMyLTg0LjdWMTYwYzAgNTMgNDMgOTYgOTYgOTZzOTYtNDMgOTYtOTZWNzUuM2MxOS45IDIyLjYgMzIgNTIuMiAzMiA4NC43ek00MTEuMiA4OS42TDM4MS44IDUwLjRDNDAxLjEgMzguNyA0MjMuOCAzMiA0NDggMzJzNDYuOSA2LjcgNjYuMiAxOC40TDQ4NC44IDg5LjZjLTMgNC03LjggNi40LTEyLjggNi40SDQyNGMtNSAwLTkuOC0yLjQtMTIuOC02LjR6TTQ4MCAzMTYuOEM1NTMgMzAyIDYwOCAyMzcuNCA2MDggMTYwQzYwOCA3MS42IDUzNi40IDAgNDQ4IDBTMjg4IDcxLjYgMjg4IDE2MGMwIDExLjcgMS4zIDIzLjEgMy42IDM0LjFjLTU0LjkgOC4xLTEwMi4yIDM5LjUtMTMxLjYgODMuOFYxOTIuNWMwLTQ4LjQtMzYuMS04OS4zLTg0LjEtOTUuM2wtNy45LTFDNTAuNCA5NC4xIDM0LjQgMTA2LjUgMzIuMiAxMjRzMTAuMiAzMy41IDI3LjggMzUuN2w3LjkgMWMxNiAyIDI4IDE1LjYgMjggMzEuOFY0MTZjMCA1MyA0MyA5NiA5NiA5NkgzMzZjMTcuNyAwIDMyLTE0LjMgMzItMzJzLTE0LjMtMzItMzItMzJIMjgwTDQxNiAzMzkuMlY0ODBjMCAxNy43IDE0LjMgMzIgMzIgMzJzMzItMTQuMyAzMi0zMlYzMTYuOHpNNDAwIDE2MGExNiAxNiAwIDEgMSAzMiAwIDE2IDE2IDAgMSAxIC0zMiAwem04MC0xNmExNiAxNiAwIDEgMSAwIDMyIDE2IDE2IDAgMSAxIDAtMzJ6TTIzMS41IDEyLjNjLTIuNi03LTEyLjQtNy0xNSAwTDIwNS44IDQxLjFjLS44IDIuMi0yLjUgMy45LTQuNyA0LjdMMTcyLjMgNTYuNWMtNyAyLjYtNyAxMi40IDAgMTVsMjguOCAxMC43YzIuMiAuOCAzLjkgMi41IDQuNyA0LjdsMTAuNyAyOC44YzIuNiA3IDEyLjQgNyAxNSAwbDEwLjctMjguOGMuOC0yLjIgMi41LTMuOSA0LjctNC43bDI4LjgtMTAuN2M3LTIuNiA3LTEyLjQgMC0xNUwyNDYuOSA0NS44Yy0yLjItLjgtMy45LTIuNS00LjctNC43TDIzMS41IDEyLjN6Ii8+PC9zdmc+Cg==") center center no-repeat;
  background-size: contain;
  height: 2rem;
  width: 2rem;
  margin-right: 5px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
  animation-duration: 2s;
}

.general-about .online img {
  display: none;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 100 comments ( View all | Add Comment )

kameron	1774486718 is there a way to change the color or no Report Comment
JSJ90	1773927888 using! Report Comment
Silver_F4wn	1773416478 Using! Report Comment
Milo	1770586095 using Report Comment
Sparrow	1770445709 using!! Report Comment
ERMM	1770304607 using!! Report Comment
/tp_BREAD	1768952941 DEF USING :P Report Comment
GrumpyGhost	1767316240 usinggg so cute!! Report Comment
khayy ( ˙꒳˙ )	1766224788 usinggg!! Report Comment
Sphebble	1765428475 I used this for the blinking animation, not the icon. But the space cat looks cute! :3 Report Comment
LoathingMyself	1764707298 Using :p Report Comment
♯┆ ˢᴷᴼᴼᵀᴱᴿ .ᐟ ★	1760802317 usinngg :3 Report Comment
CharlyStarr	1759927993 Using! Report Comment
-N◌ki⁎𓆣ִ ࣪⭒｡⋆𖦹	1756937164 using! tysm x) Report Comment
CAT!! IN SPACE!!! 🍕	1755171963 usinggg Report Comment
natnat98	1754549308 yay using this!! Report Comment
starlitstarfish	1754326726 Using :3 Report Comment
~faye~	1754153852 using~ Report Comment
soot	1753695774 using!!! :3 Report Comment
sasha	1753261704 Using Report Comment