CSS实现有尾巴的loading加载动画

这次动画和上一篇那个实现loading动画差不多，但是多了一个尾巴，看起来比较好看
效果图为

首先HTML代码和上一个一样

<div id="loader">
    Loading...
</div>

然后一个一个说style：
在没有加伪元素之前的效果为：

代码为：

         body{
            background-color: green;
        }
        /*和加载动画不一样的是，这次是他自己本身的颜色就是透明的，并且带有渐变
        色，*/
        #loader{
            animation: load-effect 3s infinite linear;
            text-indent: -9999px;
            position: relative;
            width:200px;
            height:200px;
            box-shadow: inset 0 0 0 15px  rgba(255,255,255,