63 lines
3.6 KiB
XML
Executable File
63 lines
3.6 KiB
XML
Executable File
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dice" style="background: none;"><g style="transform:scale(0.8); transform-origin: 50px 50px"><g><rect x="10" y="10" width="80" height="80" ng-attr-stroke="{{config.c1}}" ng-attr-fill="{{config.c4}}" ng-attr-stroke-width="{{config.strokeWidth}}" stroke="#222" fill="#f9f9f9" stroke-width="5"></rect></g><g><rect x="10" y="10" width="80" height="80" ng-attr-stroke="{{config.c1}}" ng-attr-fill="{{config.c4}}" ng-attr-stroke-width="{{config.strokeWidth}}" stroke="#222" fill="#f9f9f9" stroke-width="5"></rect></g><g><rect x="10" y="10" width="80" height="80" ng-attr-stroke="{{config.c1}}" ng-attr-fill="{{config.c4}}" ng-attr-stroke-width="{{config.strokeWidth}}" stroke="#222" fill="#f9f9f9" stroke-width="5"></rect></g><g><rect x="10" y="10" width="80" height="80" ng-attr-stroke="{{config.c1}}" ng-attr-fill="{{config.c4}}" ng-attr-stroke-width="{{config.strokeWidth}}" stroke="#222" fill="#f9f9f9" stroke-width="5"></rect></g><g><circle cx="50" cy="50" r="10" ng-attr-fill="{{config.c2}}" stroke-width="0" fill="#ee3311"></circle></g><g><circle cx="30" cy="30" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="70" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle></g><g><circle cx="30" cy="30" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="70" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="30" cy="70" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="30" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="30" cy="50" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="50" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle></g><g><circle cx="30" cy="30" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="70" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="30" cy="70" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="70" cy="30" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle><circle cx="50" cy="50" r="6" ng-attr-fill="{{config.c3}}" stroke-width="0" fill="#222222"></circle></g></g><style type="text/css">@keyframes lds-dice {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
24% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
transform: rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: rotateY(180deg);
|
|
opacity: 0;
|
|
}
|
|
74% {
|
|
opacity: 0;
|
|
}
|
|
75% {
|
|
transform: rotateY(270deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotateY(360deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.lds-dice g g {
|
|
transform-origin: 50px 50px 40px;
|
|
}
|
|
.lds-dice g g:nth-child(1) {
|
|
animation: lds-dice 2s linear infinite;
|
|
}
|
|
.lds-dice g g:nth-child(2) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -0.5s;
|
|
}
|
|
.lds-dice g g:nth-child(3) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -1s;
|
|
}
|
|
.lds-dice g g:nth-child(4) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -1.5s;
|
|
}
|
|
.lds-dice g g:nth-child(5) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: 0;
|
|
}
|
|
.lds-dice g g:nth-child(6) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -0.5s;
|
|
}
|
|
.lds-dice g g:nth-child(7) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -1s;
|
|
}
|
|
.lds-dice g g:nth-child(8) {
|
|
animation: lds-dice 2s linear infinite;
|
|
animation-delay: -1.5s;
|
|
}
|
|
</style></svg> |