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); } }

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.

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; }

Funny custom spinner

Development

neil (Neil Lalonde) 2016 年 10 月 31 日午後 9:25 3

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

トピック		返信	表示
Replace Spinner with a logo Product Support	7	2697	2020 年 10 月 25 日
How to use Font Awesome pulse as the loading icon? Product Support	1	429	2022 年 5 月 23 日
Customize the loading icon Developers how-to	7	3372	2021 年 6 月 16 日
Found a workable CSS hack to show spinner/loader on slow initial load UX	4	3262	2018 年 4 月 4 日
Where's the pumpkin? Product Support halloween-decorations	2	258	2023 年 11 月 8 日

Funny custom spinner

関連トピック