| 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>
| |