teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

アンカーリンクの情報が抜けていたので追記&ローディング画面のcssも一応載せておきます。

2019/07/23 13:08

投稿

doyadoya213
doyadoya213

スコア23

title CHANGED
File without changes
body CHANGED
@@ -9,11 +9,67 @@
9
9
  何卒よろしくお願いしますm(__)m
10
10
 
11
11
  ```HTML
12
+ <!-- ページの一番上に移動するためのアンカーリンク -->
13
+ <p id="scroll-up" style="display: block; opacity: 1;">
14
+ <a href="#"></a>
15
+ </p>
16
+     <!-- ローディング画面 -->
12
17
  <div id="preloader">
13
18
  <div class="spinner"></div>
14
19
  </div>
15
20
  ```
16
21
 
22
+ ```CSS
23
+ #preloader {
24
+ background: #14355d;
25
+ position: fixed;
26
+ top: 0;
27
+ right: 0;
28
+ bottom: 0;
29
+ left: 0;
30
+ z-index: 99998;
31
+ display: block;
32
+ }
33
+
34
+ .spinner {
35
+ width: 60px;
36
+ height: 60px;
37
+ margin: auto;
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ bottom: 0;
42
+ right: 0;
43
+ -webkit-border-radius: 100%;
44
+ -moz-border-radius: 100%;
45
+ border-radius: 100%;
46
+ text-indent: -9999px;
47
+ border-top: 2px solid #df1843;
48
+ border-right: 2px solid #8a9297;
49
+ border-bottom: 2px solid #8a9297;
50
+ border-left: 2px solid #8a9297;
51
+ -webkit-transform: translateZ(0);
52
+ -moz-transform: translateZ(0);
53
+ -o-transform: translateZ(0);
54
+ -ms-transform: translateZ(0);
55
+ transform: translateZ(0);
56
+ -webkit-animation: spin .5s linear infinite;
57
+ -moz-animation: spin .5s linear infinite;
58
+ -ms-zoom-animation: spin .5s linear infinite;
59
+ -o-animation: spin .5s linear infinite;
60
+ animation: spin .5s linear infinite;
61
+ }
62
+
63
+ @keyframes spin {
64
+ 0% {
65
+ transform: rotate(0);
66
+ }
67
+
68
+ 100% {
69
+ transform: rotate(360deg);
70
+ }
71
+ ```
72
+
17
73
  ```JavaScript
18
74
  $(function() {
19
75
  $(window).on('pageshow', function() {