-
如果你参观过Nicolas Zezuka和活动理论的优秀设计网站，你可能已经注意到，动态页面的加载动画显示新的内容之前，这种风格的动画近来很流行，所以本文希望能给你一些灵感。
这种影响的核心是允许一个形状是动画在网页窗口，有活动的迹象。当新内容加载，形状将动画返回到显示页面。我们要用snap.svg动画库，因为这个库允许我们创建复杂的形状，有趣的转化的影响。
在线演示
需要注意的是，这里的示例只提供了一种思维方式，动态内容加载是模拟的。此外，没有降级，动画和伪元素可能在某些浏览器中不起作用。
温馨提示：为了保证最佳效果，请在现代浏览器如IE10 +，Chrome浏览，Firefox和Safari。
我们展示掩码的方式是定义一个SVG路径动画：
初始路径定义在页面上不可见，并开始和结果的路径被定义在数据开放和数据关闭性能，分别。你可以看到，我们用的是一个小的观片灯，但我们伸展的绘图窗口100%的宽度和高度，没有长度和宽度的比例。如果我们不定义一个封闭的路径，我们将回到初始路径动画。
请注意，我们还可以添加多个路径（用分号隔开），这使得SVG绘制分步动画你会看到在第一个示范。我们将覆盖到一个固定的位置，覆盖整个页面，实现加载提示效果的前和后：：：伪元素添加款式。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
{ Pageload覆盖。
位置：固定；
宽度：100%；
身高：100%；
顶部：0；
左：0；
可见性：隐藏；
}
{。pageload-overlay.show
可见性：可见；
}
SVG { pageload覆盖。
位置：绝对；
顶部：0；
左：0；
}
SVG路径{ pageload覆盖。
补：# FFF；
}
我们使用这里的知名度，因为使用这些固定的风格定位、指针和SVG的事件可以在移动终端上有一些问题，所以我们更换他们的定位和操作父div中你可能已经注意到循环动画也实现了从一个路径到另一个路径转换（还有其他的方式来实现，如缩放），但我们使用下面的值来确定圆的反应形式（rseponsive）。
xml代码将内容复制到剪贴板。
宽度= 100% 100% 100% ，008060 preserveaspectratio = =xmidymid片
切片的使用将保持纵横比，但整个页面的显示区域可以覆盖，我们的示例创建13的影响，但你可以看到，可能性是无止境的。我们真的希望你是开明的。