「利用者:Tai」の版間の差分
ナビゲーションに移動
検索に移動
(ページの白紙化) |
|||
| 1行目: | 1行目: | ||
| − | + | <html> | |
| + | <head> | ||
| + | <style type="text/css"> | ||
| + | svg.loadingBar | ||
| + | { | ||
| + | width: 80%; | ||
| + | height:100; | ||
| + | } | ||
| + | @media only screen and (max-device-width: 480px) | ||
| + | { | ||
| + | svg.loadingBar | ||
| + | { | ||
| + | width: 80%; | ||
| + | hight: 55; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body><svg class="loadingBar" viewBox="0 0 100% 100%"> | ||
| + | <rect x=0% width="0%" height="10%" fill="orangered"> | ||
| + | <animate attributeName="width" attributeType="XML" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading1"/> | ||
| + | <animate attributeName="fill" attributeType="XML" from="orangered" to="gold" fill="freeze" dur="2s" repeatCount="never" id="loading1"/> | ||
| + | <animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/> | ||
| + | </rect> | ||
| + | <rect x="50%" width="0%" height="10%" fill="gold"> | ||
| + | <animate attributeName="width" attributeType="XML" begin="loading1.end" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading2"/> | ||
| + | <animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/> | ||
| + | </rect> | ||
| + | <text x="102%">完了！</text> | ||
| + | </svg> | ||
| + | </body> | ||
| + | </html> | ||
2020年2月29日 (土) 10:15時点における版