File tree Expand file tree Collapse file tree 2 files changed +2
-1
lines changed
Expand file tree Collapse file tree 2 files changed +2
-1
lines changed Original file line number Diff line number Diff line change 1- <!DOCTYPE html> < html lang ="en "> < head > < meta charset ="utf-8 "> < title > Single Element CSS Spinners</ title > < link rel ="stylesheet " href ="css/main.css "> < link rel ="stylesheet " href ="http://fonts.googleapis.com/css?family=Lato:300 "> < link rel ="stylesheet " href ="css/load1.css "> < link rel ="stylesheet " href ="css/load2.css "> < link rel ="stylesheet " href ="css/load3.css "> < link rel ="stylesheet " href ="css/load4.css "> < link rel ="stylesheet " href ="css/load5.css "> < link rel ="stylesheet " href ="css/load6.css "> < link rel ="stylesheet " href ="css/load7.css "> < link rel ="stylesheet " href ="css/load8.css "> </ head > < body > < header > < div class ="inner "> < h1 > Single Element CSS Spinners</ h1 > </ div > </ header > < main > < div class ="inner "> < div class ="load-container load1 "> < div class ="loader "> Loading...</ div > < a href ="#load1 "> < View Source ></ a > </ div > < div class ="load-container load2 "> < div class ="loader "> Loading...</ div > < a href ="#load2 "> < View Source ></ a > </ div > < div class ="load-container load3 "> < div class ="loader "> Loading...</ div > < a href ="#load3 "> < View Source ></ a > </ div > < div class ="load-container load4 "> < div class ="loader "> Loading...</ div > < a href ="#load4 "> < View Source ></ a > </ div > < div class ="load-container load5 "> < div class ="loader "> Loading...</ div > < a href ="#load5 "> < View Source ></ a > </ div > < div class ="load-container load6 "> < div class ="loader "> Loading...</ div > < a href ="#load6 "> < View Source ></ a > </ div > < div class ="load-container load7 "> < div class ="loader "> Loading...</ div > < a href ="#load7 "> < View Source ></ a > </ div > < div class ="load-container load8 "> < div class ="loader "> Loading...</ div > < a href ="#load8 "> < View Source ></ a > </ div > </ div > < a href ="https://github.com/lukehaas/css-loaders " target ="_blank " class ="github "> < img src ="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67 " alt ="Fork me on GitHub " data-canonical-src ="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png "> </ a > < div class ="overlay hidden "> </ div > <!--really pissed off Jade can handle vars in includes - should be able to just loop this:--> < div id ="load1 " class ="source hidden "> < textarea readonly class ="markup "> < div class ="loader "> Loading...</ div > </ textarea > < textarea readonly class ="css "> .load1 .loader,
1+ <!DOCTYPE html> < html lang ="en "> < head > < meta charset ="utf-8 "> < meta name ="viewport " content ="width=device-width "> < title > Single Element CSS Spinners</ title > < link rel ="stylesheet " href ="css/main.css "> < link rel ="stylesheet " href ="http://fonts.googleapis.com/css?family=Lato:300 "> < link rel ="stylesheet " href ="css/load1.css "> < link rel ="stylesheet " href ="css/load2.css "> < link rel ="stylesheet " href ="css/load3.css "> < link rel ="stylesheet " href ="css/load4.css "> < link rel ="stylesheet " href ="css/load5.css "> < link rel ="stylesheet " href ="css/load6.css "> < link rel ="stylesheet " href ="css/load7.css "> < link rel ="stylesheet " href ="css/load8.css "> </ head > < body > < header > < div class ="inner "> < h1 > Single Element CSS Spinners</ h1 > </ div > </ header > < main > < div class ="inner "> < div class ="load-container load1 "> < div class ="loader "> Loading...</ div > < a href ="#load1 "> < View Source ></ a > </ div > < div class ="load-container load2 "> < div class ="loader "> Loading...</ div > < a href ="#load2 "> < View Source ></ a > </ div > < div class ="load-container load3 "> < div class ="loader "> Loading...</ div > < a href ="#load3 "> < View Source ></ a > </ div > < div class ="load-container load4 "> < div class ="loader "> Loading...</ div > < a href ="#load4 "> < View Source ></ a > </ div > < div class ="load-container load5 "> < div class ="loader "> Loading...</ div > < a href ="#load5 "> < View Source ></ a > </ div > < div class ="load-container load6 "> < div class ="loader "> Loading...</ div > < a href ="#load6 "> < View Source ></ a > </ div > < div class ="load-container load7 "> < div class ="loader "> Loading...</ div > < a href ="#load7 "> < View Source ></ a > </ div > < div class ="load-container load8 "> < div class ="loader "> Loading...</ div > < a href ="#load8 "> < View Source ></ a > </ div > </ div > < a href ="https://github.com/lukehaas/css-loaders " target ="_blank " class ="github "> < img src ="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67 " alt ="Fork me on GitHub " data-canonical-src ="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png "> </ a > < div class ="overlay hidden "> </ div > <!--really pissed off Jade can handle vars in includes - should be able to just loop this:--> < div id ="load1 " class ="source hidden "> < textarea readonly class ="markup "> < div class ="loader "> Loading...</ div > </ textarea > < textarea readonly class ="css "> .load1 .loader,
22.load1 .loader:before,
33.load1 .loader:after {
44 background: #FFF;
Original file line number Diff line number Diff line change @@ -3,6 +3,7 @@ doctype html
33html( lang ="en" )
44 head
55 meta( charset ="utf-8" )
6+ meta( name ="viewport" ,content ="width=device-width" )
67 title= config .title
78 link( rel ="stylesheet" ,href ="css/main.css" )
89 link( rel ="stylesheet" ,href ="http://fonts.googleapis.com/css?family=Lato:300" )
You can’t perform that action at this time.
0 commit comments