人の事をとやかく言うけど、自分の事はとやかく言って欲しくない、ユゲタです。
WEBサービス開発で、必ず使うと言ってもいいLoadingアニメーションですが、svgファイル読み込むだけでgifファイルのようにアニメってくれないかな〜と考えていたら、svgの中にstyleが書けるという事を思い出しました。
animation指定すれば、アニメってくれるのではないかと思って試してみたら、まあまあうまく出来たので、その成果を掲載しておきます。
また、普通に使えそうな、パターンを２つ紹介しておきますので、お気に入りをコピペして使ってくださいませ。
スタンダードなCircleバージョン
<svg class="circle" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.circle {
}
svg.circle > g > g{
position:relative;
}
svg.circle > g > g > circle{
position:absolute;
fill : black;
cx : 0px;
cy : 0px;
transform:translateY(-26px);
animation: anim-circle-dot 0.9s ease-in-out infinite;
}
svg.circle > g > g:nth-child(1){
transform:translate(32px, 32px) rotate(0deg);
}
svg.circle > g > g:nth-child(1) > circle{
animation-delay: 0s;
}
svg.circle > g > g:nth-child(2){
transform:translate(32px, 32px) rotate(40deg);
}
svg.circle > g > g:nth-child(2) > circle{
animation-delay: -0.8s;
}
svg.circle > g > g:nth-child(3){
transform:translate(32px, 32px) rotate(80deg);
}
svg.circle > g > g:nth-child(3) > circle{
animation-delay: -0.7s;
}
svg.circle > g > g:nth-child(4){
transform:translate(32px, 32px) rotate(120deg);
}
svg.circle > g > g:nth-child(4) > circle{
animation-delay: -0.6s;
}
svg.circle > g > g:nth-child(5){
transform:translate(32px, 32px) rotate(160deg);
}
svg.circle > g > g:nth-child(5) > circle{
animation-delay: -0.5s;
}
svg.circle > g > g:nth-child(6){
transform:translate(32px, 32px) rotate(200deg);
}
svg.circle > g > g:nth-child(6) > circle{
animation-delay: -0.4s;
}
svg.circle > g > g:nth-child(7){
transform:translate(32px, 32px) rotate(240deg);
}
svg.circle > g > g:nth-child(7) > circle{
animation-delay: -0.3s;
}
svg.circle > g > g:nth-child(8){
transform:translate(32px, 32px) rotate(280deg);
}
svg.circle > g > g:nth-child(8) > circle{
animation-delay: -0.2s;
}
svg.circle > g > g:nth-child(9){
transform:translate(32px, 32px) rotate(320deg);
}
svg.circle > g > g:nth-child(9) > circle{
animation-delay: -0.1s;
}
@keyframes anim-circle-dot{
0%{opacity:0.0;}
10%{opacity:1.0;}
90%{opacity:0.0;}
100%{opacity:0.0;}
}
</style>
<g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
<g><circle r="6"></circle></g>
</g>
</svg>
See the Pen svg-loading circle by YugetaKoji (@geta1972) on CodePen.
以前掲載たcssバージョンよりは、imgタグでsvgファイルを読み込むだけでアニメーション効果が出せるし、サイズも自由に変更できる為、使い勝手は抜群です。見た目がきれいなspinnerバージョン
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<style>
svg.spinner {
animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
svg.spinner > .path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation:
dash 1.4s ease-in-out infinite,
colors 5.6s ease-in-out infinite;
}
@keyframes colors {
0% { stroke: #4285F4; }
25% { stroke: #DE3E35; }
50% { stroke: #F7C223; }
75% { stroke: #1B9A59; }
100% { stroke: #4285F4; }
}
@keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 47;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
</style>
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
See the Pen svg-loading spinner by YugetaKoji (@geta1972) on CodePen.
このバージョンは、最近色々なサービスで使われているのを見かけるのですが、codepenで他の人が紹介しているのを、svgに落とし込むように改造したバージョンです。 他にも使えそうなのがあれば、随時紹介していきますね。 お楽しみに！！！
