Skip to content

Instantly share code, notes, and snippets.

@fanyer

fanyer/index.html

Forked from anonymous/index.html
Created November 21, 2016 01:51
Show Gist options
  • Save fanyer/374f95fb7fba32e686866c20af1dc8a0 to your computer and use it in GitHub Desktop.
Save fanyer/374f95fb7fba32e686866c20af1dc8a0 to your computer and use it in GitHub Desktop.
Download ZIP
Material Design - Circle Progress
Raw
index.html
<div id="home" data-role="page">
<div role="main" class="ui-content">
<!--red-->
<div style="width:100%; text-align:center; margin-top:20px; font-size:20px; font-weight:500;">Material Design - Progress and Activity</div>
<div style="width:100%; text-align:center; margin-top:10px;">
<div class="sd">
<svg class="loading-bg-red" width="100" height="100" x="0" y="0" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="rgba(255,100,120,.2)" stroke-width="0" fill="none" stroke-dasharray="156,156" stroke-dashoffset="0" stroke-linecap="round"></circle>
</svg>
<svg width="100" height="100" class="loading-circle loading-red" x="100" y="100" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="#f99" stroke-width="1" fill="none" stroke-dasharray="104,156" stroke-linecap="round" stroke-dashoffset="-52"></circle>
</svg>
</div>
<!--blue-->
<div class="sd">
<svg class="loading-bg-blue" width="100" height="100" x="0" y="0" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="rgba(100,170,255,.2)" stroke-width="0" fill="none" stroke-dasharray="156,156" stroke-dashoffset="0" stroke-linecap="round"></circle>
</svg>
<svg width="100" height="100" class="loading-circle loading-blue" x="100" y="100" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="#6bf" stroke-width="1" fill="none" stroke-dasharray="104,156" stroke-linecap="round" stroke-dashoffset="-52"></circle>
</svg>
</div>
</div>
<div style="width:100%; text-align:center;">
<!--green-->
<div class="sd">
<svg class="loading-bg-green" width="100" height="100" x="0" y="0" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="rgba(120,220,170,.2)" stroke-width="0" fill="none" stroke-dasharray="156,156" stroke-dashoffset="0" stroke-linecap="round"></circle>
</svg>
<svg width="100" height="100" class="loading-circle loading-green" x="100" y="100" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="#6d9" stroke-width="1" fill="none" stroke-dasharray="104,156" stroke-linecap="round" stroke-dashoffset="-52"></circle>
</svg>
</div>
<!--yellow-->
<div class="sd">
<svg class="loading-bg-yellow" width="100" height="100" x="0" y="0" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="rgba(120,220,170,.2)" stroke-width="0" fill="none" stroke-dasharray="156,156" stroke-dashoffset="0" stroke-linecap="round"></circle>
</svg>
<svg width="100" height="100" class="loading-circle loading-yellow" x="100" y="100" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="#fb6" stroke-width="1" fill="none" stroke-dasharray="104,156" stroke-linecap="round" stroke-dashoffset="-52"></circle>
</svg>
</div>
</div>
<div style="width:100%; text-align:center;">
<!--four-color-->
<div class="sd">
<svg class="loading-bg-three-color" width="100" height="100" x="0" y="0" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="rgba(120,220,170,.2)" stroke-width="0" fill="none" stroke-dasharray="156,156" stroke-dashoffset="0" stroke-linecap="round"></circle>
</svg>
<svg width="100" height="100" class="loading-circle loading-three-color" x="100" y="100" style="position:absolute; top:0; left:0;">
<circle cx="50" cy="50" r="25" stroke="#6d9" stroke-width="1" fill="none" stroke-dasharray="104,156" stroke-linecap="round" stroke-dashoffset="-52"></circle>
</svg>
</div>
</div>
</div>
</div>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html,body,#home,.ui-content{
width:100%;
height:100%;
padding:0;
margin:0;
text-shadow:none;
font-family:Open Sans Condensed;
}
core-toolbar{
color:#fff;
fill:#fff;
}
core-toolbar span{
font-size:22px;
line-height:18px;
font-weight:900;
}
core-toolbar paper-icon-button{
margin: 0 -15px;
}
body{
background:#eee;
}
.sd{
position:relative;
width:100px;
height:100px;
display:inline-block;
}
.loading-red circle{
stroke:#f99;
}
.loading-green circle{
stroke:#6d9;
}
.loading-yellow circle{
stroke:#fb6;
}
.loading-blue circle{
stroke:#6bf;
}
.loading-circle{
-webkit-animation:c1_1 1.5s infinite linear;
-moz-animation:c1_1 1.5s infinite linear;
animation:c1_1 1.5s infinite linear;
}
.loading-circle circle{
-webkit-animation:c1_2 9s linear infinite,c1_3 4.5s infinite;
-moz-animation:c1_2 9s linear infinite,c1_3 4.5s infinite;
animation:c1_2 9s linear infinite,c1_3 4.5s infinite;
}
.loading-bg-red circle{
stroke-dashoffset:100;
-webkit-animation:b1 9s linear infinite,br1_1 9s infinite;
-moz-animation:b1 9s linear infinite,br1_1 9s infinite;
animation:b1 9s linear infinite,br1_1 9s infinite;
}
.loading-bg-blue circle{
stroke-dashoffset:100;
-webkit-animation:b1 9s linear infinite,bb1_1 9s infinite;
-moz-animation:b1 9s linear infinite,bb1_1 9s infinite;
animation:b1 9s linear infinite,bb1_1 9s infinite;
}
.loading-bg-green circle{
stroke-dashoffset:100;
-webkit-animation:b1 9s linear infinite,bg1_1 9s infinite;
-moz-animation:b1 9s linear infinite,bg1_1 9s infinite;
animation:b1 9s linear infinite,bg1_1 9s infinite;
}
.loading-bg-yellow circle{
stroke-dashoffset:100;
-webkit-animation:b1 9s linear infinite,by1_1 9s infinite;
-moz-animation:b1 9s linear infinite,by1_1 9s infinite;
animation:b1 9s linear infinite,by1_1 9s infinite;
}
.loading-bg-three-color circle{
stroke-dashoffset:100;
-webkit-animation:b1 9s linear infinite,bt1_1 9s;
-moz-animation:b1 9s linear infinite,bt1_1 9s;
animation:b1 9s linear infinite,bt1_1 9s;
}
.loading-three-color circle{
-webkit-animation:change 4.5s infinite,c1_2 9s linear infinite,c1_3 4.5s infinite;
-moz-animation:change 4.5s infinite,c1_2 9s linear infinite,c1_3 4.5s infinite;
animation:change 4.5s infinite,c1_2 9s linear infinite,c1_3 4.5s infinite;
}
@-webkit-keyframes c1_1{
0%,100%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-360deg);
}
}
@-webkit-keyframes c1_2{
0%{
stroke-width:0;
}
10%{
stroke-width:8;
}
75%{
stroke-width:8;
}
90%{
stroke-width:0;
}
100%{
stroke-width:0;
}
}
@-webkit-keyframes c1_3{
0%{
stroke-dasharray:104,156;
stroke-dashoffset:-52;
}
16%{
stroke-dasharray:1,156;
stroke-dashoffset:-52;
}
16.01%{
stroke-dasharray:1,156;
stroke-dashoffset:-208;
}
33%{
stroke-dasharray:104,52;
stroke-dashoffset:-104;
}
33.01%{
stroke-dasharray:104,52;
stroke-dashoffset:-104;
}
49%{
stroke-dasharray:1,156;
stroke-dashoffset:-104;
}
49.01%{
stroke-dasharray:1,156;
stroke-dashoffset:52;
}
66%{
stroke-dasharray:104,52;
stroke-dashoffset:156;
}
66.01%{
stroke-dasharray:104,52;
stroke-dashoffset:156;
}
82%{
stroke-dasharray:1,156;
stroke-dashoffset:156;
}
82.01%{
stroke-dasharray:1,156;
stroke-dashoffset:156;
}
99.99%{
stroke-dasharray:104,52;
stroke-dashoffset:256;
}
}
@-webkit-keyframes b1{
0%{
stroke-dashoffset:-156;
}
5%{
stroke-dashoffset:0;
}
100%{
stroke-dashoffset:0;
}
}
@-webkit-keyframes br1_1{
0%{
stroke-width:0;
stroke:rgba(255,100,120,0);
}
5%{
stroke-width:18;
stroke:rgba(255,100,120,.2);
}
7%{
stroke-width:13;
stroke:rgba(255,100,120,.2);
}
10%{
stroke-width:16;
stroke:rgba(255,100,120,.1);
}
80%{
stroke-width:16;
stroke:rgba(255,100,120,.1);
}
100%{
stroke-width:0;
stroke:rgba(255,100,120,0);
}
}
@-webkit-keyframes bb1_1{
0%{
stroke-width:0;
stroke:rgba(100,170,255,0);
}
5%{
stroke-width:18;
stroke:rgba(100,170,255,.2);
}
7%{
stroke-width:13;
stroke:rgba(100,170,255,.2);
}
10%{
stroke-width:16;
stroke:rgba(100,170,255,.1);
}
80%{
stroke-width:16;
stroke:rgba(100,170,255,.1);
}
100%{
stroke-width:0;
stroke:rgba(100,170,255,0);
}
}
@-webkit-keyframes bg1_1{
0%{
stroke-width:0;
stroke:rgba(120,220,170,0);
}
5%{
stroke-width:18;
stroke:rgba(120,220,170,.2);
}
7%{
stroke-width:13;
stroke:rgba(120,220,170,.2);
}
10%{
stroke-width:16;
stroke:rgba(120,220,170,.1);
}
80%{
stroke-width:16;
stroke:rgba(120,220,170,.1);
}
100%{
stroke-width:0;
stroke:rgba(120,220,170,0);
}
}
@-webkit-keyframes by1_1{
0%{
stroke-width:0;
stroke:rgba(255,220,100,0);
}
5%{
stroke-width:18;
stroke:rgba(255,220,100,.2);
}
7%{
stroke-width:13;
stroke:rgba(255,220,100,.2);
}
10%{
stroke-width:16;
stroke:rgba(255,220,100,.1);
}
80%{
stroke-width:16;
stroke:rgba(255,220,100,.1);
}
100%{
stroke-width:0;
stroke:rgba(255,220,100,0);
}
}
@-webkit-keyframes bt1_1{
0%{
stroke-width:0;
stroke:rgba(200,200,200,0);
}
5%{
stroke-width:18;
stroke:rgba(200,200,200,.2);
}
7%{
stroke-width:13;
stroke:rgba(200,200,200,.2);
}
10%{
stroke-width:16;
stroke:rgba(200,200,200,.1);
}
80%{
stroke-width:16;
stroke:rgba(200,200,200,.1);
}
100%{
stroke-width:0;
stroke:rgba(200,200,200,0);
}
}
@-webkit-keyframes change{
0%{
stroke:#f99;
}
15%{
stroke:#f99;
}
17%{
stroke:#6bf;
}
33%{
stroke:#6bf;
}
33.01%{
stroke:#6bf;
}
49%{
stroke:#6bf;
}
49.01%{
stroke:#6d9;
}
66%{
stroke:#6d9;
}
66.01%{
stroke:#6d9;
}
81%{
stroke:#6d9;
}
83%{
stroke:#f99;
}
99.99%{
stroke:#f99;
}
}
@keyframes c1_1{
0%,100%{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@keyframes c1_2{
0%{
stroke-width:0;
}
10%{
stroke-width:8;
}
75%{
stroke-width:8;
}
90%{
stroke-width:0;
}
100%{
stroke-width:0;
}
}
@keyframes c1_3{
0%{
stroke-dasharray:104,156;
stroke-dashoffset:-52;
}
16%{
stroke-dasharray:1,156;
stroke-dashoffset:-52;
}
16.01%{
stroke-dasharray:1,156;
stroke-dashoffset:-208;
}
33%{
stroke-dasharray:104,52;
stroke-dashoffset:-104;
}
33.01%{
stroke-dasharray:104,52;
stroke-dashoffset:-104;
}
49%{
stroke-dasharray:1,156;
stroke-dashoffset:-104;
}
49.01%{
stroke-dasharray:1,156;
stroke-dashoffset:52;
}
66%{
stroke-dasharray:104,52;
stroke-dashoffset:156;
}
66.01%{
stroke-dasharray:104,52;
stroke-dashoffset:156;
}
82%{
stroke-dasharray:1,156;
stroke-dashoffset:156;
}
82.01%{
stroke-dasharray:1,156;
stroke-dashoffset:156;
}
99.99%{
stroke-dasharray:104,52;
stroke-dashoffset:256;
}
}
@keyframes b1{
0%{
stroke-dashoffset:-156;
}
5%{
stroke-dashoffset:0;
}
100%{
stroke-dashoffset:0;
}
}
@keyframes br1_1{
0%{
stroke-width:0;
stroke:rgba(255,100,120,0);
}
5%{
stroke-width:18;
stroke:rgba(255,100,120,.2);
}
7%{
stroke-width:13;
stroke:rgba(255,100,120,.2);
}
10%{
stroke-width:16;
stroke:rgba(255,100,120,.1);
}
80%{
stroke-width:16;
stroke:rgba(255,100,120,.1);
}
100%{
stroke-width:0;
stroke:rgba(255,100,120,0);
}
}
@keyframes bb1_1{
0%{
stroke-width:0;
stroke:rgba(100,170,255,0);
}
5%{
stroke-width:18;
stroke:rgba(100,170,255,.2);
}
7%{
stroke-width:13;
stroke:rgba(100,170,255,.2);
}
10%{
stroke-width:16;
stroke:rgba(100,170,255,.1);
}
80%{
stroke-width:16;
stroke:rgba(100,170,255,.1);
}
100%{
stroke-width:0;
stroke:rgba(100,170,255,0);
}
}
@keyframes bg1_1{
0%{
stroke-width:0;
stroke:rgba(120,220,170,0);
}
5%{
stroke-width:18;
stroke:rgba(120,220,170,.2);
}
7%{
stroke-width:13;
stroke:rgba(120,220,170,.2);
}
10%{
stroke-width:16;
stroke:rgba(120,220,170,.1);
}
80%{
stroke-width:16;
stroke:rgba(120,220,170,.1);
}
100%{
stroke-width:0;
stroke:rgba(120,220,170,0);
}
}
@keyframes by1_1{
0%{
stroke-width:0;
stroke:rgba(255,220,100,0);
}
5%{
stroke-width:18;
stroke:rgba(255,220,100,.2);
}
7%{
stroke-width:13;
stroke:rgba(255,220,100,.2);
}
10%{
stroke-width:16;
stroke:rgba(255,220,100,.1);
}
80%{
stroke-width:16;
stroke:rgba(255,220,100,.1);
}
100%{
stroke-width:0;
stroke:rgba(255,220,100,0);
}
}
@keyframes bt1_1{
0%{
stroke-width:0;
stroke:rgba(200,200,200,0);
}
5%{
stroke-width:18;
stroke:rgba(200,200,200,.2);
}
7%{
stroke-width:13;
stroke:rgba(200,200,200,.2);
}
10%{
stroke-width:16;
stroke:rgba(200,200,200,.1);
}
80%{
stroke-width:16;
stroke:rgba(200,200,200,.1);
}
100%{
stroke-width:0;
stroke:rgba(200,200,200,0);
}
}
@keyframes change{
0%{
stroke:#f99;
}
15%{
stroke:#f99;
}
17%{
stroke:#6bf;
}
33%{
stroke:#6bf;
}
33.01%{
stroke:#6bf;
}
49%{
stroke:#6bf;
}
49.01%{
stroke:#6d9;
}
66%{
stroke:#6d9;
}
66.01%{
stroke:#6d9;
}
81%{
stroke:#6d9;
}
83%{
stroke:#f99;
}
99.99%{
stroke:#f99;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment