conextra
Version:
Conextra for Web Development. Helps create a SPWA (Single-page Progressive Web Application).
415 lines (339 loc) • 9.11 kB
HTML
<style>
#progess .sphere {
float: left;
height: .5em;
width: .5em;
border-radius: 50%;
float: left;
margin-right: 31px;
z-index: 20 ;
position: relative;
-webkit-transform: scale(.3);
z-index: -1;
background: -webkit-radial-gradient(10% 10%, ellipse cover, #98c1fd 0%,#0d6efd 50%,#98c1fd 100%); /* Chrome10+, Safari5.1+ */
background: -moz-radial-gradient(10% 10%, ellipse cover, #98c1fd 0%, #0d6efd 50%, #98c1fd 100%); /* FF3.6+ */
background: -o-radial-gradient(10% 10%, ellipse cover, #98c1fd 0%,#0d6efd 50%,#98c1fd 100%); /* Opera 12+ */
background: -ms-radial-gradient(10% 10%, ellipse cover, #98c1fd 0%,#0d6efd 50%,#98c1fd 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #98c1fd 0%,#0d6efd 50%,#98c1fd 100%); /* W3C */
}
#progess .shadow {
float: left;
position: relative;
top: -6.9em;
width: 2em;
left: 54px;
height: 0.5em;
box-shadow: 0px 0px 25px -.5px rgba(255, 255, 255, 1);
border-radius: 50%;
float: left;
margin-right: 31px;
-webkit-transform: scale(.3);
opacity: 0;
}
#progess .sphere:before { /*sourced from hop.ie/blog/balls*/
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 20%, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
z-index: 2;
}
#progess .clear {
clear: both;
}
#progess #sphere1 {
-webkit-animation: scale-1 2s 0s infinite;
}
#progess #sphere2 {
-webkit-animation: scale-2 2s .2s infinite;
}
#progess #sphere3 {
-webkit-animation: scale-3 2s .4s infinite;
}
#progess #sphere4 {
-webkit-animation: scale-4 2s .6s infinite;
}
#progess #sphere5 {
-webkit-animation: scale-5 2s .8s infinite;
}
#progess #sphere6 {
-webkit-animation: scale-6 2s 1s infinite;
}
#progess #sphere7 {
-webkit-animation: scale-7 2s 1.2s infinite;
}
#progess #sphere8 {
-webkit-animation: scale-8 2s 1.4s infinite;
}
#progess #sphere9 {
-webkit-animation: scale-9 2s 1.6s infinite;
}
#progess #sphere10 {
-webkit-animation: scale-10 2s 1.8s infinite;
}
@-webkit-keyframes fade-1 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-2 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-3 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-4 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-5 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-6 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-7 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-8 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-9 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes fade-10 {
0% {
-webkit-transform: scale(.3);
opacity: 0;
}
35%, 65% {
-webkit-transform: scale(1);
opacity: .3;
}
65%, 100% {
-webkit-transform: scale(.3);
opacity: 0;
}
}
@-webkit-keyframes scale-1 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-2 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-3 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-4 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-5 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-6 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-7 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-8 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-9 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes scale-10 {
0% {
-webkit-transform: scale(.3);
}
35%, 65% {
-webkit-transform: scale(1);
}
65%, 100% {
-webkit-transform: scale(.3);
}
}
</style>
<span id="progess" bind="progess(hidden)">
<span class="sphere" id="sphere1"></span>
<span class="sphere" id="sphere2"></span>
<span class="sphere" id="sphere3"></span>
<span class="sphere" id="sphere4"></span>
<span class="sphere" id="sphere5"></span>
<span class="sphere" id="sphere6"></span>
<span class="sphere" id="sphere7"></span>
<span class="sphere" id="sphere8"></span>
<span class="sphere" id="sphere9"></span>
<span class="sphere" id="sphere10"></span>
</span>