带有 svg 动画的 wordpress 预加载器答案

【问题标题】：Preloader with svg animation for wordpress带有 svg 动画的 wordpress 预加载器
【发布时间】：2018-05-11 10:58:37
【问题描述】：

首先：this is my SVG animated with css & js（使用 wp 的 SVG 支持插件）

第二：我尝试在我的本地主机上为 wordpress 使用不同的预加载器插件，但我没有找到一个可以让我的 js 用于动画的插件。所以我来找你们帮我做这件事。或者如果你知道一个好的插件......

动画结束后，我想要一个过渡，就像使用 here when you go to Studio page 的过渡一样，带有 2 种背景颜色。 wordpress 可以这样做。

谢谢

【问题讨论】：

您可以使用 WPBakery Page Builder 的 Ultimate Addons 和革命滑块专业插件
可以如你所愿用SVG完成，请查看我们的工作design-studio.io
我们使用了lottie，也许你可以使用github.com/airbnb/lottie-web。我们为 WordPress 和 JS 插件构建了一个 Visual Composer 插件以供 HTML 使用
@TechnoDeviser 你能详细说明一下吗？我已经在我的主题中使用了这些插件。我该怎么做呢？

标签： wordpress svg preloader

【解决方案1】：

这是要复制和粘贴的 html 代码。

body {
  font-family: "Courier New", Courier, monospace;
  background-color: #333333;
  margin: 0px;
  padding: 0px;
  color: #e8e8e8;
}
a{
   color: #e8e8e8;
}
.path {
  stroke-dasharray: 310;
  stroke-dashoffset: 280;
  animation: dash 2s linear  infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
 
  25% {
    stroke-dashoffset: 15;
  }
  100% {
    stroke-dashoffset: 280;
  }
}

.loader {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

<div style=" display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100vh;">
<svg class='loader'
   width="120"
   height="120">
   <circle
    class="progress-ring__circle"
    stroke="#D9DDE4"
    stroke-width="10"
    stroke-linecap="round"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
  <circle
    class="path" 
    stroke="#1a73e8"
    stroke-width="10"
    stroke-linecap="round"
    fill="transparent"
    r="52"
    cx="60"
    cy="60"/>
 
</svg>
  
  <a href="https://codesandbox.io/s/ring-preloader-ui-opeso" target="_blank">?[Customize your own ring preloader]?</a>
  </div>

【讨论】：