「利用者:Tai」の版間の差分
ナビゲーションに移動
検索に移動
| 5行目: | 5行目: | ||
{ | { | ||
width: 80%; | width: 80%; | ||
| − | height: | + | height:5em; |
} | } | ||
@media only screen and (max-device-width: 480px) | @media only screen and (max-device-width: 480px) | ||
| 12行目: | 12行目: | ||
{ | { | ||
width: 80%; | width: 80%; | ||
| − | hight: | + | hight: 5em; |
| + | } | ||
| + | } | ||
| + | svg.mainSvg | ||
| + | { | ||
| + | width: 80%; | ||
| + | height:100%; | ||
| + | } | ||
| + | @media only screen and (max-device-width: 480px) | ||
| + | { | ||
| + | svg.mainSvg | ||
| + | { | ||
| + | width: 80%; | ||
| + | hight: 100%; | ||
} | } | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
| − | <body><svg class="loadingBar" viewBox="0 0 100% 100%"> | + | <body> |
| − | <rect x=0% width="0%" height=" | + | <p>続行するには認証してください</p> |
| − | <animate attributeName="width" attributeType="XML" from="0%" to="50%" fill="freeze" dur="2s" repeatCount="never" id="loading1"/> | + | <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" 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"/> | <animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/> | ||
</rect> | </rect> | ||
| − | <rect x="50%" width="0%" height=" | + | <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="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"/> | <animate attributeName="fill" attributeType="XML" begin="loading1.end" from="gold" to="limegreen" fill="freeze" dur="2s" repeatCount="never"/> | ||
</rect> | </rect> | ||
| − | <text | + | <text y="3em">認証完了・閲覧可能です</text> |
| + | <rect y="2em" width="100%" height="2em" fill="white"> | ||
| + | <animate attributeName="height" attributeType="XML" begin="loading2.end" from="2em" to="0" calcMode="discrete" dur="1s" fill="freeze" repeatCount="never" id="loadingEnd"/> | ||
| + | </rect> | ||
| + | </svg> | ||
| + | <svg class="mainSvg" viewBox="0 0 100% 100%"> | ||
| + | <text y="3em" style="font-size: 2em; font-style: bold;">@taiについて</text> | ||
</svg> | </svg> | ||
</body> | </body> | ||
</html> | </html> | ||
2020年2月29日 (土) 12:07時点における版
続行するには認証してください