Прелоадер JS, gif или видео?
Лучше конечно CSS +SVG 
gif на весь экран и видео слишком громоздкие получатся.
А готовых CSS бабочек предостаточно, не думаю что потребуется заказывать на фрилансе, можно просто "подпилить" под свои нужды. Вот например отличный вариант или вот  или можно взять вот эту и самому задать нужную траекторию движения.
Вариантов куча, пользуйтесь поиском
Лучше, правильней и логичней поступить так: 
 - открыть топку;
 - закинуть туда этот прелоадер с летающей бабочкой на весь экран;
 - закрыть топку.
Наличие прелоадера может означать только одно: у нас настолько медленный сайт, что пока грузится страница - вы можете сделать себе чай или по-наблюдать как летает бабочка. Повлиять на скорость загрузки - нет, этого мы не умеем ¯\_(ツ)_/¯
Ваша страница должна загружаться настолько быстро, чтобы необходимость в прелоадере отпала сама собой и единственным вариантом посмотреть на него, было намеренное "оттягивание" отображения страницы. Но это заболевание не смертельно и проходит само со временем.