ローディング画面設定オプションの補足

下記URLの補足です。
https://www.iflag-moo.com/tools/epress/manual/update/727

MTGで話がありましたが、本件に関してはあくまで社内向けということでマニュアルでもさりげなく、最低限の記載になっています。
ツールを使う前提ではなく書かれているので、ツールを使った場合の手順を補足します。

ツール

社内向けなのでマニュアルにはあえて載せていません。
外注には共有しないでください。
https://www.iflag-moo.com/tools/common/svg_animation_generator/

手順補足

SVG

社内で作成する場合は、ツールに入れてダウンロードしたものを使用してください。
デザイナーでもコーダーでもどちらがしてもいいですが必ずツールに通してください。

SVGの名前

svg_animation.svgという名前でツールからダウンロードされるので適宜リネームしてください。

SVGのアニメーション

ツール＞Get Code＞Copy CSS Code To Clipboard
cssをコピーして_custom.scssに追記してください。そうしないと動きません。

SVGのレスポンシブ対応

現行のbaseであれば問題ないはずですが、うまくいかない場合は下記のデータを差し替えてください。
今までのgulpの画像圧縮だとsvgの中の viewBox を削除してしまうようなのでそれをオフにする設定する必要があります。
下記の位置にあるimg.jsを
projects/gulp/img.js
このzipの中にある img.js に差し替えてください。

ローディング画面の背景色

デベロッパーツールで確認できますがejs内にcssがあります。
\view\template\subdivide_loader.ejs