編集者
47
回編集
Tai
2020年1月25日 (土)に参加
編集の要約なし
{|class="wikitable"
<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>