images/opening_with_progess_animated.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="495" height="495" viewBox="-49.5 -49.5 99 99">
<defs>
</defs>
<rect x="-49.5" y="-49.5" width="99" height="99" fill="#282828" />
<circle cx="0" cy="0" r="49.5" fill="black" />
<circle cx="0" cy="0" r="40.5" fill="#282828" />
<rect x="-40.5" y="-4.5" width="81" height="9" fill="black" />
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-11.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-22.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-33.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="lime" transform="rotate(-45.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="lime" transform="rotate(-56.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-67.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-78.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;"/>
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="dodgerblue" transform="rotate(-90.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-101.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-112.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-123.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
dodgerblue;lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-135.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;
lime;lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-146.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;
lime;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-157.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-168.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-180.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-191.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-202.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-213.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="lime" transform="rotate(-225.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="lime" transform="rotate(-236.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-247.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-258.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-270.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-281.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-292.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="dodgerblue" transform="rotate(-303.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
slategrey;lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-315.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="lime;lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;
lime;lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-326.25)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="lime;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;
lime;slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-337.5)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;
slategrey;slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-348.75)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;
slategrey;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue" />
</rect>
<rect x="42.5" y="-2.5" width="5" height="5" origin="center" fill="slategrey" transform="rotate(-360.0)">
<animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="1.5s" 
values="slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;slategrey;lime;lime;slategrey;slategrey;
dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;dodgerblue;lime;lime;dodgerblue;dodgerblue" />
</rect>
<rect x="34.318" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="26.137" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="17.956" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="9.774999999999999" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="1.5940000000000012" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="-6.586999999999996" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="-14.768" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="-22.948999999999998" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="-31.129999999999995" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
<rect x="-39.31099999999999" y="-2.5" width="5" height="5" origin="center" fill="slategrey" />
</svg>