「利用者:Tai」の版間の差分
ナビゲーションに移動
検索に移動
| 1行目: | 1行目: | ||
| − | { | + | <html> |
| − | + | <head> | |
| − | + | <style type="text/css"> | |
| − | + | svg.loadingBar | |
| − | + | { | |
| − | + | width: 80%; | |
| − | + | height: 11em; | |
| − | + | } | |
| − | + | .h1 | |
| − | + | { | |
| − | + | font-size: 2em; | |
| − | + | font-style: bold; | |
| − | + | } | |
| − | + | @media only screen and (max-device-width: 480px) | |
| − | + | { | |
| − | + | svg.loadingBar | |
| − | + | { | |
| − | + | width: 80%; | |
| − | + | hight: 11em; | |
| − | + | } | |
| + | .h1 | ||
| + | { | ||
| + | font-size: 1.2em; | ||
| + | font-style: bold; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | <p>続行するには認証してください</p> | ||
| + | <svg class="loadingBar" viewBox="0 0 100% 100%"> | ||
| + | <text y="1em" id="loadingStart"">認証</text> | ||
| + | <rect x=0% width="0%" height="1.1em" fill="orangered"> | ||
| + | <animate attributeName="width" attributeType="XML" from="0%" to="50%" fill="freeze" begin="loadingStart.click" 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="1.1em" 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 y="3em">認証完了・閲覧可能です</text> | ||
| + | <rect y="2em" width="100%" height="2em" fill="white"> | ||
| + | <animate attributeName="height" attributeType="XML" begin="loading2.end" to="0" calcMode="discrete" dur="1s" fill="freeze" repeatCount="never" id="loadingEnd"/> | ||
| + | </rect> | ||
| + | <text y="3em" class="h1">情報</text> | ||
| + | <text y="7.1em" style="color:red">エラー 削除されています</text> | ||
| + | <rect y="3em" width="100%" height="8em" fill="white"> | ||
| + | <animate attributeName="height" attributeType="XML" begin="loading2.end" to="0" calcMode="discrete" dur="1s" fill="freeze" repeatCount="never" id="loadingEnd"/> | ||
| + | </rect> | ||
| + | </svg> | ||
| + | </body> | ||
| + | </html> | ||
2020年12月4日 (金) 15:01時点における版
続行するには認証してください