Replace Loadingimage with css

[blackcrack]

Hi, whys do you not replace the loading-grafics with an
css3 loading graph ? (also in the themes folder to load)

<PHP include ('$theme/loader/loader.php') ; ?>

<div id="loader">
<PHP include ('$theme/loader/loader.html'); ?>
</div>

loader big/loader small ?
there some examples :
http://cssload.net/

i have play a bit around,
many fun by testing out :)

(HTML)

<div id="loader">
    <div id="circularG_1" class="circularG"></div>
    <div id="circularG_2" class="circularG"></div>
    <div id="circularG_3" class="circularG"></div>
    <div id="circularG_4" class="circularG"></div>
    <div id="circularG_5" class="circularG"></div>
    <div id="circularG_6" class="circularG"></div>
    <div id="circularG_7" class="circularG"></div>
    <div id="circularG_8" class="circularG"></div>
</div>

(CSS)

#loader{
    position:relative;
    width:83px;
    height:83px;
    margin: auto;
}

.circularG{
    position:absolute;
    background-color:rgb(10,175,252);
    width:19px;
    height:19px;
    border-radius:12px;
        -o-border-radius:12px;
        -ms-border-radius:12px;
        -webkit-border-radius:12px;
        -moz-border-radius:12px;
    animation-name:bounce_circularG;
        -o-animation-name:bounce_circularG;
        -ms-animation-name:bounce_circularG;
        -webkit-animation-name:bounce_circularG;
        -moz-animation-name:bounce_circularG;
    animation-duration:1.1s;
        -o-animation-duration:1.1s;
        -ms-animation-duration:1.1s;
        -webkit-animation-duration:1.1s;
        -moz-animation-duration:1.1s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
}

#circularG_1{
    left:0;
    top:33px;
    animation-delay:0.41s;
        -o-animation-delay:0.41s;
        -ms-animation-delay:0.41s;
        -webkit-animation-delay:0.41s;
        -moz-animation-delay:0.41s;
}

#circularG_2{
    left:8px;
    top:8px;
    animation-delay:0.55s;
        -o-animation-delay:0.55s;
        -ms-animation-delay:0.55s;
        -webkit-animation-delay:0.55s;
        -moz-animation-delay:0.55s;
}

#circularG_3{
    top:0;
    left:33px;
    animation-delay:0.69s;
        -o-animation-delay:0.69s;
        -ms-animation-delay:0.69s;
        -webkit-animation-delay:0.69s;
        -moz-animation-delay:0.69s;
}

#circularG_4{
    right:8px;
    top:8px;
    animation-delay:0.83s;
        -o-animation-delay:0.83s;
        -ms-animation-delay:0.83s;
        -webkit-animation-delay:0.83s;
        -moz-animation-delay:0.83s;
}

#circularG_5{
    right:0;
    top:33px;
    animation-delay:0.97s;
        -o-animation-delay:0.97s;
        -ms-animation-delay:0.97s;
        -webkit-animation-delay:0.97s;
        -moz-animation-delay:0.97s;
}

#circularG_6{
    right:8px;
    bottom:8px;
    animation-delay:1.1s;
        -o-animation-delay:1.1s;
        -ms-animation-delay:1.1s;
        -webkit-animation-delay:1.1s;
        -moz-animation-delay:1.1s;
}

#circularG_7{
    left:33px;
    bottom:0;
    animation-delay:1.24s;
        -o-animation-delay:1.24s;
        -ms-animation-delay:1.24s;
        -webkit-animation-delay:1.24s;
        -moz-animation-delay:1.24s;
}

#circularG_8{
    left:8px;
    bottom:8px;
    animation-delay:1.38s;
        -o-animation-delay:1.38s;
        -ms-animation-delay:1.38s;
        -webkit-animation-delay:1.38s;
        -moz-animation-delay:1.38s;
}



@keyframes bounce_circularG{
    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(.3);
    }
}

@-o-keyframes bounce_circularG{
    0%{
        -o-transform:scale(1);
    }

    100%{
        -o-transform:scale(.3);
    }
}

@-ms-keyframes bounce_circularG{
    0%{
        -ms-transform:scale(1);
    }

    100%{
        -ms-transform:scale(.3);
    }
}

@-webkit-keyframes bounce_circularG{
    0%{
        -webkit-transform:scale(1);
    }

    100%{
        -webkit-transform:scale(.3);
    }
}

@-moz-keyframes bounce_circularG{
    0%{
        -moz-transform:scale(1);
    }

    100%{
        -moz-transform:scale(.3);
    }
}

[MorrisJobke]

Hey @blackcrack :)

Nice idea - can you come up with a pull request so we can test this with actual code? I really like the idea and would love to see this done.

Thanks for the proposal

cc @owncloud/designers

[blackcrack]

....

[jancborchardt]

Closing this as duplicate of »Switch to simpler looking loading spinner« #19091 – I also just posted some simpler code in there. @blackcrack as @MorrisJobke said if you do happen to find the time, a pull request is welcome. If not, that’s fine too. :)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.