jeffreyrogers
New Member
I have the following code:\[code\] <div class="spinner"> <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div> <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div> <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div> <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div> <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div> <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div> <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div> </div>\[/code\]This along with some CSS, makes an animated spinner.However it's quite messy, especially if I want to use it multiple times. I can use Javascript to create it but that's also a bit messy, I mean shouldn't the structure be kept to HTML? Is there a way to do something like:\[code\]<template name="spinner"> <div class="spinner"> <div style="-webkit-animation-delay:0.24s; border-color: #777;"></div> <div style="-webkit-animation-delay:0.20s; border-color: #888;"></div> <div style="-webkit-animation-delay:0.16s; border-color: #999;"></div> <div style="-webkit-animation-delay:0.12s; border-color: #AAA;"></div> <div style="-webkit-animation-delay:0.08s; border-color: #BBB;"></div> <div style="-webkit-animation-delay:0.04s; border-color: #CCC;"></div> <div style="-webkit-animation-delay:0.00s; border-color: #DDD;"></div> </div></template><body> <template target="spinner" /> <!-- Some other stuff --> <template target="spinner" /></body>\[/code\](without using javascript)